/* Article and archive share the site's outer grid and olive design tokens. */
.sd-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 4vw, 48px);
}
.sd-post-hero {
  padding: 40px 0;
  border-bottom: 1px solid var(--o-line);
  background: radial-gradient(ellipse at 0 0, rgba(169, 192, 127, .08), transparent 70%), var(--o-bg-2);
}
.sd-post-heading, .sd-post-main { min-width: 0; width: 100%; max-width: 780px; }
.sd-post-heading h1 {
  margin: 20px 0;
  color: var(--o-text);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.sd-post-breadcrumbs, .sd-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--o-text-3);
  font-size: 13px;
  line-height: 1.6;
}
.sd-post-breadcrumbs a, .sd-post-meta a { color: var(--o-text-2); text-decoration: none; }
.sd-post-meta { gap: 8px 24px; font-family: var(--o-mono); font-size: 12px; color: var(--o-text-2); }
.sd-post-meta a { color: var(--o-sage-2); }
.sd-post-layout { align-items: start; padding-top: 40px; padding-bottom: 64px; }
.sd-post-body { margin: 0; max-width: none; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.sd-post-body > :first-child { margin-top: 0; }
.sd-post-body > p:first-child > strong:only-child { font-weight: 500; }
.sd-post-body p { margin: 0 0 24px; }
.sd-post-body h2 { margin: 40px 0 20px; padding-top: 28px; font-size: 26px; line-height: 1.3; }
.sd-post-body h3 { margin: 28px 0 16px; font-size: 21px; line-height: 1.4; }
.sd-post-body :is(h2, h3) { scroll-margin-top: calc(var(--o-header-h) + 24px); }
.sd-post-body :is(ul, ol) { padding-left: 24px; margin: 0 0 24px; }
.sd-post-body li { margin: 8px 0; }
.sd-post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.sd-post-body figure { margin: 24px 0; }
.sd-post-body :not(pre) > code { white-space: normal; }
.sd-post-body a { text-underline-offset: 3px; }
.sd-post-table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--o-line); border-radius: 12px; }
.sd-post-table table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.sd-post-table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--o-line); text-align: left; min-width: 140px; }
.sd-post-table th { color: var(--o-text); background: var(--o-surface); }
.sd-post-footer { margin-top: 40px; border-top: 1px solid var(--o-line); padding-top: 20px; }
.sd-post-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--o-sage-2); font-size: 14px; }
.sd-post-sidebar { display: grid; gap: 16px; min-width: 0; }
.sd-post-widget { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--o-line); border-radius: var(--o-r); background: var(--o-surface); }
.sd-post-widget h2 { margin: 0 0 16px; color: var(--o-text); font-size: 13px; line-height: 1.5; font-weight: 600; }
.sd-post-widget ul, .sd-post-widget ol { list-style: none; margin: 0; padding: 0; }
.sd-post-widget a { color: var(--o-text-2); text-decoration: none; font-size: 14px; line-height: 1.6; }
.sd-post a:hover { color: var(--o-sage-2); }
.sd-post-categories a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 0; }
.sd-post-categories li + li, .sd-post-recent li + li { border-top: 1px solid var(--o-line); }
.sd-post-categories a[aria-current] { color: var(--o-sage-2); }
.sd-post-count { color: var(--o-text-3); font: 12px var(--o-mono); }
.sd-post-recent a { display: grid; gap: 6px; padding: 16px 0; }
.sd-post-recent li:first-child a { padding-top: 0; }
.sd-post-recent li:last-child a { padding-bottom: 0; }
.sd-post-recent time { color: var(--o-text-3); font: 11px var(--o-mono); }
.sd-post-toc a { display: block; padding: 8px 0; }
.sd-post-search { display: flex; border: 1px solid var(--o-line-2); border-radius: 10px; overflow: hidden; background: var(--o-bg); }
.sd-post-search input { width: 100%; min-width: 0; border: 0; padding: 0 12px; color: var(--o-text); background: transparent; font: 13px var(--o-font); }
.sd-post-search input::placeholder, .sd-news-tools input::placeholder { color: var(--o-text-3); opacity: 1; }
.sd-post-search button { display: grid; place-items: center; flex: 0 0 44px; height: 44px; padding: 0; border: 0; background: rgba(169, 192, 127, .1); color: var(--o-sage-2); cursor: pointer; }
.sd-post-search:focus-within { outline: 2px solid var(--o-sage); outline-offset: 3px; }
.sd-post-search input:focus-visible { outline: none; }
.sd-post :is(a, button, [tabindex]):focus-visible,
.sd-news-index :is(input, select, button):focus-visible { outline: 2px solid var(--o-sage); outline-offset: 4px; }
.sd-news-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; align-items: end; gap: 16px; margin-bottom: 32px; }
.sd-news-tools label { display: grid; gap: 8px; min-width: 0; font-size: 12px; color: var(--o-text-2); }
.sd-news-tools :is(input, select) { min-width: 0; width: 100%; height: 44px; border: 1px solid var(--o-line-2); border-radius: 10px; background: var(--o-surface); color: var(--o-text); padding: 0 12px; font: 14px var(--o-font); color-scheme: dark; }
.sd-news-tools button, .sd-news-empty button { min-height: 44px; padding: 10px 20px; border: 1px solid var(--o-line-2); border-radius: 10px; background: var(--o-sage-2); color: var(--o-bg); font: 600 13px var(--o-font); cursor: pointer; }
.sd-news-tools button:hover, .sd-news-empty button:hover { background: var(--o-sage); }
.sd-news-results { margin: 0 0 24px; color: var(--o-text-2); font-size: 14px; }
.sd-news-empty { padding: 32px 0; }
.sd-news-empty h2 { font-size: 24px; margin: 0 0 12px; }
.sd-news-empty p { margin: 0 0 20px; color: var(--o-text-2); }
[data-news-item][hidden], [data-news-empty][hidden], [data-news-toc][hidden] { display: none !important; }
@media (max-width: 1023px) {
  .sd-post-grid { grid-template-columns: minmax(0, 1fr); }
  .sd-post-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sd-post-layout { row-gap: 40px; }
}
@media (max-width: 600px) {
  .sd-post-hero { padding: 28px 0; }
  .sd-post-heading h1 { margin: 16px 0; }
  .sd-post-layout { padding-top: 28px; padding-bottom: 40px; }
  .sd-post-body { font-size: 16px; line-height: 1.75; }
  .sd-post-body h2 { margin-top: 32px; font-size: 23px; }
  .sd-post-breadcrumbs { font-size: 12px; gap: 6px 8px; }
  .sd-post-meta { gap: 8px 16px; }
  .sd-post-sidebar, .sd-news-tools { grid-template-columns: minmax(0, 1fr); }
}