/* Engineering Notes — composition styles. Shared primitives stay in design-system/. */
html { scroll-behavior: smooth; }
.ds-app { overflow-x: clip; }
.ds-app .ds-header { position: sticky; top: 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ds-app .ds-nav__link[aria-current=page] { color: var(--ds-color-accent) !important; }
.ds-app .blog-contact { border: 1px solid var(--ds-color-border-strong); margin-left: .5rem; }
.ds-app .blog-contact:hover { border-color: var(--ds-color-accent); }
.blog-intro { position: relative; overflow: hidden; border-bottom: 1px solid var(--ds-color-border); padding-block: clamp(4.5rem, 9vw, 8rem); }
.blog-intro::after { content: ""; pointer-events: none; position: absolute; top: 0; right: -5%; width: 55%; height: 100%; opacity: .22; background-image: linear-gradient(var(--ds-color-border-strong) 1px, transparent 1px), linear-gradient(90deg, var(--ds-color-border-strong) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, black); }
.blog-intro .ds-container { position: relative; z-index: 1; }
.blog-intro h1 { max-width: 13ch; margin: 1.5rem 0 1rem; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1.06; letter-spacing: -.075em; font-weight: 650; }
.blog-intro p { max-width: 63ch; color: var(--ds-color-muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.75; margin-bottom: 0; }
.blog-intro__actions { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.blog-listing { border-bottom: 0; }
.blog-search { max-width: 590px; margin: 1.5rem 0 1.25rem; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.blog-filter { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-pill); background: transparent; padding: .5rem .8rem; color: var(--ds-color-muted); font: 500 .73rem/1.35 var(--ds-font-mono); min-height: 39px; }
.blog-filter:hover { color: var(--ds-color-text); border-color: var(--ds-color-border-strong); }
.blog-filter[aria-pressed=true] { background: var(--ds-color-accent); color: var(--ds-color-accent-contrast); border-color: var(--ds-color-accent); }
.blog-listing .ds-post-item { border-radius: var(--ds-radius-xs); padding: 1.55rem .5rem; }
.blog-listing .ds-post-item__title { font-size: clamp(1.1rem,2vw,1.35rem); }
.blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.blog-listing .ds-post-item__excerpt { max-width: 72ch; }
.blog-empty { padding: clamp(2rem,5vw,4rem); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); background: var(--ds-color-surface); }
.blog-empty__symbol { color: var(--ds-color-accent); font: .8rem var(--ds-font-mono); }
.blog-empty h3 { font-size: clamp(1.5rem,3vw,2.2rem); letter-spacing: -.045em; margin: 1rem 0 .65rem; }
.blog-empty p { color: var(--ds-color-muted); max-width: 57ch; }
.blog-no-results { padding: 1.5rem 0; color: var(--ds-color-muted); }
.blog-article-header { padding: clamp(2.75rem,6vw,5.3rem) 0 clamp(2.5rem,5vw,4rem); border-bottom: 1px solid var(--ds-color-border); }
.blog-article-header .ds-container { max-width: var(--ds-content-width); }
.blog-article-meta { margin-top: 2.35rem; }
.blog-article-header .ds-article__title { max-width: 19ch; }
.blog-article-header .blog-tags { margin-top: 1.25rem; }
.blog-author { font: .75rem/1.6 var(--ds-font-mono); color: var(--ds-color-subtle); margin: 1.65rem 0 0; }
.blog-article-body { padding-block: clamp(2.5rem,5vw,4.3rem); }
.blog-article-body .ds-prose { max-width: var(--ds-reading-width); margin-inline: auto; }
.blog-article-body .ds-prose :is(h2,h3,h4) { scroll-margin-top: 6rem; }
/* Generous editorial rhythm, inspired by Notion without using empty paragraphs. */
.blog-article-body .ds-prose p { margin-block: 0 1.8rem; }
.blog-article-body .ds-prose > :first-child { margin-top: 0; }
.blog-article-body .ds-prose h2 {
  margin: clamp(3.5rem, 6vw, 4.4rem) 0 1.4rem;
  font-size: clamp(1.65rem, 3vw, 2rem);
  line-height: 1.24;
}
.blog-article-body .ds-prose h3 {
  margin: clamp(2.6rem, 4vw, 3.3rem) 0 1.1rem;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  line-height: 1.32;
}
.blog-article-body .ds-prose :is(ul,ol) { margin-block: .5rem 2rem; }
.blog-article-body .ds-prose :is(li + li) { margin-top: .65rem; }
.blog-article-body .ds-prose blockquote { margin-block: 2.2rem; }
.blog-article-body .ds-prose :is(.highlighter-rouge,.blog-diagram) { margin-block: 2.35rem; }
.blog-article-body .ds-prose > :last-child { margin-bottom: 0; }
.blog-article-body .ds-prose ul { list-style: disc; }
.blog-article-body .ds-prose ol { list-style: decimal; }
.blog-article-body .ds-prose li { margin: .35rem 0; }
.blog-article-body .ds-prose table { display: block; overflow-x: auto; width: max-content; max-width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .89rem; }
.blog-article-body .ds-prose th, .blog-article-body .ds-prose td { padding: .65rem .85rem; text-align: left; border: 1px solid var(--ds-color-border); }
.blog-article-body .ds-prose th { background: var(--ds-color-surface-raised); }
.blog-article-body .ds-prose img { max-width: 100%; height: auto; border-radius: var(--ds-radius-sm); }
.blog-article-body .ds-prose figure { margin-inline: 0; }
.blog-article-body .ds-prose figcaption { font: .73rem/1.5 var(--ds-font-mono); color: var(--ds-color-subtle); }
.blog-article-body .ds-prose .highlight { background: var(--ds-color-code-bg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); overflow: hidden; margin: 1.6rem 0; }
.blog-article-body .ds-prose .highlight pre { background: transparent; border: 0; margin: 0; border-radius: 0; overflow-x: auto; }
.blog-article-body .ds-prose :not(pre) > code { overflow-wrap: anywhere; }
.blog-article-body .ds-prose a { text-decoration: underline; text-underline-offset: .2em; }
.blog-article-body .ds-prose a:hover { color: var(--ds-color-highlight); }
.blog-article-body .ds-prose blockquote { padding: .45rem 1.2rem; margin: 1.5rem 0; }
.blog-article-end { padding-bottom: clamp(3rem,6vw,5rem); }
.blog-article-end .ds-callout { max-width: var(--ds-reading-width); margin-inline: auto; }
.blog-article-end .ds-callout p { color: var(--ds-color-muted); margin: .4rem 0 1rem; }
.blog-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.3rem; color: var(--ds-color-muted); font: .76rem/1.6 var(--ds-font-mono); }
.blog-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.blog-footer__links a:hover { color: var(--ds-color-accent); }
.blog-article-body .ds-prose pre { scrollbar-width: thin; }
@media (max-width: 800px) {
  .ds-app .blog-contact { margin-left: 0; }
  .blog-intro::after { width: 90%; }
}
@media (max-width: 600px) {
  .blog-intro { padding-block: 3.7rem; }
  .blog-article-header .ds-article__title { font-size: clamp(2.3rem,8vw,3.3rem); }
  .blog-article-meta { gap: .45rem; }
  .blog-footer__inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Diagrams are self-contained, server-rendered SVGs; no JS required to see them. */
.blog-article-body .ds-prose .blog-diagram {
  margin: 2.5rem 0;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  max-width: 100%;
}
.blog-article-body .ds-prose .blog-diagram__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--ds-color-border);
}
.blog-article-body .ds-prose :is(.blog-diagram__tab,.blog-diagram__copy) {
  min-height: 38px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-xs);
  background: transparent;
  color: var(--ds-color-muted);
  padding: .45rem .85rem;
  font: 500 .73rem/1.4 var(--ds-font-mono);
}
.blog-article-body .ds-prose .blog-diagram__tab[aria-pressed="true"] {
  color: var(--ds-color-accent-contrast);
  background: var(--ds-color-accent);
  border-color: var(--ds-color-accent);
}
.blog-article-body .ds-prose .blog-diagram__copy { margin-left: auto; color: var(--ds-color-accent); }
.blog-article-body .ds-prose :is(.blog-diagram__tab,.blog-diagram__copy):hover {
  border-color: var(--ds-color-accent);
}
.blog-article-body .ds-prose .blog-diagram__status {
  width: 100%;
  color: var(--ds-color-accent);
  font: .69rem/1.3 var(--ds-font-mono);
}
.blog-article-body .ds-prose .blog-diagram__status:empty { display: none; }
.blog-article-body .ds-prose .blog-diagram__visual {
  width: 100%;
  padding: clamp(.65rem, 2vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.blog-article-body .ds-prose .blog-diagram__visual img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-inline: auto;
  border-radius: 0;
}
.blog-article-body .ds-prose .blog-diagram__visual img[src$="/architecture.svg"] { min-width: 1050px; }
.blog-article-body .ds-prose .blog-diagram__visual img[src$="/sequence.svg"] { min-width: 900px; }
.blog-article-body .ds-prose .blog-diagram__visual:focus-visible {
  outline: 3px solid var(--ds-color-focus);
  outline-offset: -3px;
}
.blog-article-body .ds-prose .blog-diagram__code {
  overflow: hidden;
}
.blog-article-body .ds-prose .blog-diagram__code pre {
  background: transparent;
  border: 0;
  margin: 0;
  border-radius: 0;
  padding: clamp(.9rem, 2.2vw, 1.5rem);
  overflow-x: auto;
  font: .77rem/1.7 var(--ds-font-mono);
  color: var(--ds-color-text);
}
.blog-article-body .ds-prose .blog-diagram__code code {
  white-space: pre;
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  overflow-wrap: normal;
}
.blog-article-body .ds-prose .blog-diagram figcaption {
  padding: .65rem 1rem;
  border-top: 1px solid var(--ds-color-border);
  color: var(--ds-color-muted);
  font: .73rem/1.6 var(--ds-font-sans);
}
.blog-article-body .ds-prose .blog-diagram figcaption a { color: var(--ds-color-accent); }
@media (max-width: 700px) {
  .blog-article-body .ds-prose .blog-diagram__visual img { min-width: 620px; }
  .blog-article-body .ds-prose .blog-diagram__copy { margin-left: 0; }
}

/* Keep static Mermaid SVGs in their authored dark palette in either UI mode.
   Unlike navigation/text surfaces, these are static illustrations. */
:root[data-theme="light"] .blog-article-body .blog-diagram__visual {
  background: #151b18;
}
:root[data-theme="light"] .blog-article-body .blog-diagram__visual img {
  background: #151b18;
}

/* The blog has more navigation destinations than the portfolio. Collapse early
   so the added appearance switch never squeezes or wraps desktop links. */
@media (max-width: 1050px) {
  .ds-app .ds-nav__toggle { display: inline-flex; }
  .ds-app .ds-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ds-color-border);
    background: var(--ds-color-bg);
  }
  .ds-app .ds-nav__links[data-open="true"] { display: flex; }
  .ds-app .ds-nav__link { padding: .85rem; }
}