/* Engineering notes — the same paper, ink and rules as the portfolio. */
.blog-shell, .article-shell { max-width: var(--max); margin-inline: auto; padding: 0 var(--pad); }
.eyebrow { font: 11px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.blog-heading { padding: 70px 0 60px; border-bottom: 1px solid var(--rule); }
.blog-heading h1 { margin: 26px 0 38px; font-size: clamp(58px, 9vw, 132px); line-height: .94; letter-spacing: -.065em; font-weight: 600; }
.blog-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.blog-intro > p:first-child { max-width: 650px; margin: 0; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.blog-byline { flex-shrink: 0; margin: 0; font: 12px/1.8 "IBM Plex Mono", monospace; }
.blog-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); padding: 48px 0; border-bottom: 1px solid var(--soft-rule); align-items: center; }
.entry-image { display: block; border-bottom: 5px solid var(--accent); }
.entry-image img { width: 100%; height: auto; }
.entry-copy h2 { font-size: clamp(30px, 3.4vw, 52px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; margin: 16px 0 22px; }
.entry-copy h2 a { text-decoration: none; }
.entry-copy > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 18px; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 22px; font: 11px "IBM Plex Mono", monospace; margin: 24px 0; }
.text-link { font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.text-link span { margin-left: 24px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 30px; font: 11px/1.6 "IBM Plex Mono", monospace; }
.article-heading { padding: 52px 0 36px; max-width: 1150px; }
.article-heading h1 { font-size: clamp(42px, 6.3vw, 94px); font-weight: 600; letter-spacing: -.055em; line-height: 1; margin: 24px 0; text-wrap: balance; }
.article-deck { max-width: 830px; font-size: clamp(21px, 2vw, 28px); line-height: 1.35; letter-spacing: -.02em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; font: 12px/1.5 "IBM Plex Mono", monospace; }
.article-cover { margin: 0 0 60px; max-width: 1120px; }
.article-cover img { width: 100%; height: auto; border-bottom: 6px solid var(--accent); }
.article-cover figcaption { margin-top: 10px; color: var(--muted); font: 10px/1.5 "IBM Plex Mono", monospace; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 780px); gap: clamp(30px, 5vw, 80px); align-items: start; }
.article-toc { position: sticky; top: 28px; border-top: 1px solid var(--rule); padding-top: 12px; }
.article-toc ol { list-style: decimal-leading-zero; padding-left: 26px; font-size: 13px; }
.article-toc li { padding: 7px 0 7px 4px; }
.article-toc a { text-decoration: none; }
.article-toc a:hover { text-decoration: underline; }
.article-body { font-size: 18px; line-height: 1.75; min-width: 0; }
.article-body p { margin: 0 0 24px; }
.article-body .article-lead { font-size: 25px; line-height: 1.4; letter-spacing: -.02em; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.article-body h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.13; letter-spacing: -.035em; margin: 52px 0 24px; scroll-margin-top: 28px; }
.article-body li { margin: 10px 0; padding-left: 4px; }
.article-body a, .blog-page a { overflow-wrap: anywhere; }
.blog-page a:hover, .home-blog a:hover { color: #a83200; }
.article-body pre { padding: 24px; background: var(--ink); color: var(--paper); overflow-x: auto; font: 13px/1.7 "IBM Plex Mono", monospace; margin: 28px 0; }
.article-body :not(pre) > code { font-size: .85em; overflow-wrap: anywhere; padding: 2px 4px; background: #e6e2d8; }
.table-wrap { max-width: 100%; overflow-x: auto; margin: 32px 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; text-align: left; }
.article-body caption { text-align: left; font: 11px/1.5 "IBM Plex Mono", monospace; margin-bottom: 15px; }
.article-body th { border-block: 1px solid var(--rule); font-weight: 600; }
.article-body th, .article-body td { padding: 14px 16px 14px 0; vertical-align: top; min-width: 120px; }
.article-body td { border-bottom: 1px solid var(--soft-rule); }
.author-note { display: flex; gap: 22px; margin-top: 60px; padding: 28px 0; border-block: 1px solid var(--rule); }
.author-note img { object-fit: cover; flex: 0 0 64px; width: 64px; height: 64px; filter: grayscale(1); }
.author-note h2 { font-size: 23px; margin: 0 0 12px; }
.author-note p { font-size: 15px; line-height: 1.55; }
.author-note .editorial-note { font-size: 12px; color: var(--muted); margin-bottom: 0; }
.related-posts { margin: 80px 0; padding-top: 30px; border-top: 1px solid var(--rule); }
.related-posts h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.05em; font-weight: 600; margin: 14px 0 30px; }
.related-posts ul { padding: 0; list-style: none; }
.related-posts li { padding: 22px 0; border-top: 1px solid var(--soft-rule); font-size: clamp(20px, 2.2vw, 30px); }
.related-posts li a { text-decoration: none; }
.related-posts > a { display: inline-block; margin-top: 28px; }
.blog-footer { max-width: var(--max); margin: 70px auto 0; padding: 28px var(--pad); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; font: 11px/1.6 "IBM Plex Mono", monospace; }
.blog-footer div { display: flex; flex-wrap: wrap; gap: 24px; }
.home-blog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.home-blog-list article { padding: 28px 30px 0 0; }
.home-blog-list article + article { padding-left: 30px; border-left: 1px solid var(--soft-rule); }
.home-blog-list h3 { font-size: clamp(25px, 2.5vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; margin: 20px 0; }
.home-blog-list h3 a { text-decoration: none; }
.home-blog-list article > p:not(.eyebrow) { color: var(--muted); }
@media (max-width: 1000px) { .article-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 35px; } }
@media (max-width: 760px) {
  .blog-heading { padding: 46px 0 38px; }
  .blog-intro { flex-direction: column; align-items: start; gap: 25px; }
  .blog-entry { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .entry-copy h2 { font-size: 36px; }
  .article-heading { padding-top: 36px; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { position: static; border-bottom: 1px solid var(--soft-rule); }
  .article-cover { margin-bottom: 32px; }
  .article-body { font-size: 17px; }
  .home-blog-list { grid-template-columns: minmax(0, 1fr); }
  .home-blog-list article, .home-blog-list article + article { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--soft-rule); }
}
@media print { .topbar, .article-toc, .related-posts, .blog-footer, .skip-link { display: none; } .article-layout { display: block; } .article-body { font-size: 11pt; } .article-body pre { white-space: pre-wrap; color: #111; background: #eee; } }