/* Block CSS for library/templates/01_hero-standard-v1.html — linked, not
   inlined, so it's cached once across every page that uses this template
   instead of duplicated in every page's response. */
.cb-hero-top { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center; padding: 40px 0; }
.cb-hero-top h1 { color: var(--cb-paper); }
.cb-hero-top h1 em { color: var(--cb-accent); font-style: italic; }
.cb-hero-top h1 .blush { color: var(--cb-accent-2); font-style: italic; }
.cb-hero-lede { margin-top: 14px; font-size: 16px; color: var(--cb-paper-dim); max-width: 50ch; }
.cb-hero-actions { margin-top: 22px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cb-hero-meta { margin-top: 14px; font-size: 14px; color: var(--cb-paper-mute); }
.cb-hero-visual { position: relative; }
.cb-hero-visual .cb-ph { aspect-ratio: 4/5; border-radius: 4px; }
.cb-hero-tag { position: absolute; bottom: -14px; left: -14px; background: var(--cb-hero-tag-bg, #c8b89a); color: #1a0800; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 2px; }
@media (max-width: 980px) {
  .cb-hero-top { grid-template-columns: 1fr; }
  .cb-hero-visual { order: -1; }
  .cb-hero-visual .cb-ph { aspect-ratio: 16/9; }
}