/* ============================================================================
   Blog posts, archives and attachment pages (inc/blog.php): body.sd-post, .sd-post-full, .sd-archive,
   .sd-attachment. Loaded after site.css on those views only.

   The canvas has no artboard for these views, so they are built from its parts: the title band on the
   blueprint grid, mono readouts (dates, meta), hairlines, square corners, one reading column of 40rem
   (about 72 characters a line, as on long-form) and, on posts, the Recent Posts box beside it.
   Content is styled, never edited; the theme adds no words (the year beside the date is drawn from data-y).
   ========================================================================= */

/* the frame: the reading column plus the box beside it; the title band lines up with the column */
.sd-post-shell { --sd-read: 40rem; --sd-side: 300px; --sd-gap: 72px; max-width: calc(var(--sd-read) + var(--sd-side) + var(--sd-gap) + 2 * var(--sd-gutter)); margin-inline: auto; padding-inline: var(--sd-gutter); }
.sd-archive-page .sd-post-shell { max-width: calc(54rem + 2 * var(--sd-gutter)); }

/* ---------------------------------------------------------------- the title band (posts, archives, attachments drawn as posts) */
.sd-entry .sd-post-head, .sd-archive-head { border-top: 1px solid var(--band); border-bottom: 1px solid var(--line); background-color: var(--bg); }
.sd-entry .sd-post-head .sd-post-shell, .sd-archive-head .sd-post-shell { padding-block: 72px 48px; }
.sd-entry .sd-post-title { margin: 0; max-width: 24ch; color: var(--text); font: 600 clamp(1.875rem, 1.25rem + 2.2vw, 3.25rem)/1.06 var(--f-display); letter-spacing: -.02em; text-align: left; text-wrap: balance; }
.sd-entry .sd-post-title a { color: inherit; text-decoration: none; }
.sd-entry .sd-post-title a:hover { color: var(--accent); }
/* the date opens the H2 (Bridge's words); shown as a readout above the title, the year drawn beside it */
.sd-post-date { display: block; width: max-content; margin: 0 0 18px; padding: 5px 9px; border: 1px solid var(--line-2); background: var(--bg);
	font: 500 12px/1.3 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sd-post-date[data-y]::after { content: " " attr(data-y); color: var(--faint); }
.sd-entry .sd-post-meta { margin: 18px 0 0; font: 12.5px/1.6 var(--f-num); color: var(--mute); }
.sd-entry .sd-post-meta a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.sd-entry .sd-post-meta a:hover { color: var(--accent); border-color: var(--accent); }

/* a post whose content opens with its own H1 (most): that H1 is the headline, so the dated H2 above reads as a kicker */
.sd-post--own-h1 .sd-entry .sd-post-head .sd-post-shell { padding-block: 44px 28px; }
.sd-post--own-h1 .sd-entry .sd-post-title { max-width: none; font: 500 14px/1.5 var(--f-num); letter-spacing: 0; color: var(--mute); }
.sd-post--own-h1 .sd-entry .sd-post-date { display: inline-block; margin: 0 10px 6px 0; vertical-align: 1px; }

/* ---------------------------------------------------------------- the post body: text column + Recent Posts */
.sd-post-body { display: grid; grid-template-columns: minmax(0, var(--sd-read)) var(--sd-side); gap: var(--sd-gap); align-items: start; padding-block: 56px 96px; }
.sd-post-body > .sd-post-text { max-width: none; margin: 0; padding: 0; min-width: 0; }
@media (max-width: 1060px) {
	.sd-post-body { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--sd-read) + 2 * var(--sd-gutter)); gap: 56px; }
	.sd-entry .sd-post-head .sd-post-shell { max-width: calc(var(--sd-read) + 2 * var(--sd-gutter)); }
}
@media (max-width: 600px) {
	.sd-post-shell { padding-inline: 18px; }
	.sd-entry .sd-post-head .sd-post-shell, .sd-archive-head .sd-post-shell { padding-block: 48px 32px; }
	.sd-post-body { padding-block: 36px 64px; }
}

/* the text of old posts (classic HTML, 2012 to 2026): one reading column, the theme's type */
.sd-post-text { overflow-wrap: break-word; }
.sd-post-text > :first-child { margin-top: 0; }
.sd-post-text h1 { margin: 0 0 .6em; font: 600 clamp(1.875rem, 1.3rem + 2vw, 3rem)/1.08 var(--f-display); letter-spacing: -.02em; text-align: left; }
.sd-post-text h1 + h1 { margin-top: 1.4em; }
.sd-post-text h2 { margin: 1.8em 0 .55em; font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.15 var(--f-display); letter-spacing: -.015em; }
.sd-post-text h3 { margin: 1.8em 0 .5em; font: 600 1.25rem/1.35 var(--f-text); letter-spacing: 0; }
.sd-post-text h4 { margin: 1.6em 0 .45em; font: 600 1.0625rem/1.4 var(--f-text); }
.sd-post-text :is(h2, h3, h4) :is(b, strong) { font-weight: inherit; }
.sd-post-text :is(h1, h2, h3, h4, h5, h6) { text-align: left; } /* old posts center some headings inline; the column reads left */
.sd-post-text :is(h1, h2, h3, h4, h5, h6)[style*="center"] { text-align: left !important; }
.sd-post-text p, .sd-post-text li { color: var(--c-copy); }
.sd-post-text p[style*="justify"] { text-align: left !important; } /* justified text on a phone column leaves rivers */
.sd-post-text ul > li::marker { color: var(--accent); }
.sd-post-text :is(p, li) a:not([class]) { overflow-wrap: anywhere; }
.sd-post-text hr { margin: 2.25em 0; }
.sd-post-text :is(h1, h2, h3, h4) img { display: block; margin: 0 0 .5em; } /* pictures pasted inside headings */
.sd-post-text :is(h1, h2, h3, h4):has(> img:only-child) { margin: 1.5em 0; }

/* pictures: framed on the dark ground (most are screenshots and art drawn on white); floats only where there is room */
.sd-post-text img { max-width: 100% !important; height: auto !important; }
.sd-post-text .wp-caption { max-width: 100% !important; margin: 1.75em 0; }
.sd-post-text .wp-caption img { display: block; }
.sd-post-text :is(.wp-caption-text, figcaption) { margin: .6em 0 0; font: 12.5px/1.5 var(--f-num); color: var(--faint); }
.sd-post-text :is(.aligncenter, img.aligncenter) { display: block; margin-inline: auto; }
@media (min-width: 640px) {
	.sd-post-text .alignleft { float: left; max-width: 46% !important; margin: .35em 1.5em 1em 0 !important; }
	.sd-post-text .alignright { float: right; max-width: 46% !important; margin: .35em 0 1em 1.5em !important; }
	.sd-post-text :is(h1, h2, h3, hr) { clear: both; }
}
@media (max-width: 639px) {
	.sd-post-text :is(.alignleft, .alignright) { float: none !important; display: block; margin: 1em 0 !important; }
}
.sd-post-text::after { content: ""; display: table; clear: both; }
.sd-post-text :is(iframe, video, embed, object) { display: block; max-width: 100%; }
.sd-post-text table { display: block; max-width: 100%; overflow-x: auto; }
.sd-post-text :is(div, span, p, figure)[style*="width"] { max-width: 100% !important; }
.sd-post-text .sd-divider { margin: 1.5em 0; }

/* tags under the text (Bridge's "Tags:" list): chips; the commas between them stay in the text, collapsed */
.sd-post-tags { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.sd-post-tags__label { margin: 0 6px 0 0; font: 500 12px/1.3 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sd-post-tags__sep { font-size: 0; }
.sd-post-text .sd-post-tags a.sd-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border: 1px solid var(--line-2); font: 500 12.5px/1.3 var(--f-num); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.sd-post-text .sd-post-tags a.sd-tag:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- Recent Posts (Bridge's widget, same 15 links) */
.sd-recent { padding: 0; border: 1px solid var(--line); background: var(--panel); font-size: inherit; } /* site.css's 0.4 stand-in rules reset */
.sd-recent__title { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 12px/1.3 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sd-recent .sd-recent__list { list-style: none; margin: 0; padding: 0; border-top: 0; }
.sd-recent__list li { margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.sd-recent__list li:last-child { border-bottom: 0; }
.sd-recent__list li::marker { content: none; }
.sd-recent__list a { display: block; padding: 0; color: var(--text); font: 600 14.5px/1.38 var(--f-text); text-decoration: none; overflow-wrap: anywhere; }
.sd-recent__list a:hover { color: var(--accent); }
.sd-recent__date { display: block; margin-top: 5px; font: 11.5px/1.3 var(--f-num); color: var(--faint); }

/* ---------------------------------------------------------------- archives (category, tag, author) */
.sd-archive-kind { margin: 0 0 16px; font: 500 12px/1.3 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sd-archive-head h1 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.06; text-align: left; overflow-wrap: break-word; }
.sd-archive-list { padding-block: 16px 96px; }
.sd-archive-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 40px; border-bottom: 1px solid var(--line); }
.sd-archive-item--img { grid-template-columns: 240px minmax(0, 1fr); }
.sd-archive-item__img { display: block; align-self: start; border: 1px solid var(--line-2); background: var(--panel); }
.sd-archive-item__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sd-archive-item .sd-post-title { max-width: none; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.2; }
.sd-archive-item .sd-post-date { margin-bottom: 12px; }
.sd-archive-item .sd-post-meta { margin-top: 12px; }
.sd-archive-item__excerpt { margin: 16px 0 20px; color: var(--mute); overflow-wrap: break-word; }
.sd-archive-item__more { margin: 0; }
.sd-archive-item__more .sd-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 700px) {
	.sd-archive-item--img { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sd-archive-item { padding-block: 32px; }
}
/* page numbers (Bridge printed every one; the links stay page content, so this is a div with the navigation role) */
.sd-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 48px; }
.sd-pager > * { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line-2);
	font: 500 13px/1 var(--f-num); color: var(--text); text-decoration: none; }
.sd-pager a:hover { border-color: var(--accent); color: var(--accent); }
.sd-pager .sd-pager__here { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink); }
/* the arrows: an SVG chevron each, no link text (as Bridge's icons); named for screen readers by the SVG's title */
.sd-pager .sd-pager__step svg { display: block; width: 16px; height: 16px; }
.sd-pager [aria-disabled="true"] { opacity: .35; pointer-events: none; }
@media (max-width: 700px) {
	.sd-pager { gap: 8px; margin-top: 40px; }
	.sd-pager > * { min-width: 44px; height: 44px; font-size: 14px; } /* finger-sized; 15 pages wrap to three rows on a phone */
}

/* ---------------------------------------------------------------- attachment pages */
.sd-attachment-body { padding-block: 56px 96px; }
.sd-attachment--page .sd-attachment-body { padding-top: 72px; }
.sd-attachment-figure { margin: 0 auto; width: max-content; max-width: 100%; padding: 12px; border: 1px solid var(--line-2); background: var(--panel); }
.sd-attachment-figure a { display: block; }
.sd-attachment-figure img { display: block; max-width: 100%; height: auto; background: #FFFFFF; }
.sd-attachment-body > p { max-width: var(--sd-read); margin: 20px auto 0; text-align: center; color: var(--mute); }

/* ---------------------------------------------------------------- the 2026 posts on Full Width (long-form layout from site.css) */
/* "Related reading" cards written into the W-2 post with white inline backgrounds: redrawn dark, as D2 does on long-form */
.sd-post-full .sd-entry .sd-related-reading { max-width: none !important; margin-inline: 0 !important; }
.sd-post-full .sd-entry .sd-related-card a { background: var(--panel) !important; border: 1px solid var(--line) !important; border-top: 1px solid var(--accent) !important; border-radius: 0 !important; color: var(--text) !important; }
.sd-post-full .sd-entry .sd-related-card a span { color: var(--text) !important; }
.sd-post-full .sd-entry .sd-related-card a span:first-child { color: var(--faint) !important; font-family: var(--f-num) !important; font-weight: 500 !important; }
.sd-post-full .sd-entry .sd-related-card a span:last-child { color: var(--accent) !important; }
.sd-post-full .sd-entry .sd-related-card a:hover { border-color: var(--accent) !important; }
/* D5 on these long-form posts too: their closing row's white "Start Free Trial" pill is hidden (it stays in the HTML);
   the CTA band closes the page */
.sd-post-full.sd-longform .sd-entry p:has(> a[href*="app.suitedash.com/register"][style*="background"]) { display: none; }
/* their closing row reuses the title band's class: drawn as a closing band, its line centered under its H2 */
.sd-post-full.sd-longform .sd-entry > .sd-secondary-header-color ~ .sd-secondary-header-color { margin-top: 64px; padding-block: 72px 56px; text-align: center; }
.sd-post-full.sd-longform .sd-entry > .sd-secondary-header-color ~ .sd-secondary-header-color p { max-width: 40rem; margin: 0 auto !important; text-align: center !important; color: var(--mute) !important; }