:root {
  --accent: #0f766e;
  --accent-contrast: #ffffff;
  --surface: #f2fbf9;
  --border: #d6e6e3;
  --font-head: "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
}
.site-header { background: var(--accent); border-bottom: none; }
.site-header .brand-name, .site-header .brand-tagline,
.site-header .site-nav a, .site-header .site-nav .count { color: var(--accent-contrast); }
.site-header .site-nav a { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 3px 12px; }
.directory-hero { background: var(--surface); border-radius: var(--radius); margin: 26px 0; padding: 26px; border: 1px solid var(--border); }
.directory-hero h1 { font-family: var(--font-head); font-size: 34px; margin: 0 0 8px; }
.category-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 0 0 10px; }
.category-tile {
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.category-tile strong { font-size: 17px; }
.category-tile span { color: var(--muted); font-size: 13px; }
.card { border-left: 5px solid var(--accent); }
.card h3 a { color: var(--text); }
.listing-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13px; }
.section-title { font-family: var(--font-head); font-size: 22px; margin: 26px 0 6px; }
.article-header h1 { font-family: var(--font-head); font-size: 36px; }
.article-body h2 { color: var(--accent); }
.article-nav { background: var(--surface); border-radius: var(--radius); margin-top: 28px; padding: 14px 18px; }