Review callout styling

[cwickham]

Callout styling for Quarto blog posts was added in #118. The current implementation uses a colored left border, type-specific icon (via CSS mask-image), and colored title text. No background color or border radius.

Five callout types are supported: note (blue), tip (green), warning (yellow), caution (orange), important (red). Callouts can also be collapsible via <details>/<summary>.

Test page: /test-callouts/ on the deploy preview for #118 shows all five types.

Some example posts that use callouts:

• /blog/great-tables/locbody-mask/ (warning with custom title)
• /blog/shiny/shiny-python-testing/ (collapsible note)
• /blog/pointblank/validation-libs-2025/ (note with default title)

CSS added to main.css:

/* Callouts */
.callout {
  margin: 1.5rem 0;
  border-left: 4px solid var(--color-gray-300);
}

.callout-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 600;
  font-size: 0.925rem;
}

.callout-body {
  padding: 0 1rem 0.75rem 1rem;
  font-size: 0.925rem;
}

/* Icons via CSS mask-image referencing SVGs in static/icons/ */
.callout-header::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask-image: url('/icons/<type>.svg');
}

/* Type colors */
.callout-note        — blue-500 border, blue-700 text
.callout-tip         — green-500 border, green-700 text
.callout-warning     — yellow-500 border, yellow-800 text (WCAG AA)
.callout-caution     — orange-500 border, orange-700 text
.callout-important   — red-500 border, red-700 text