@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  --paper: #f5f1e8;
  --ink: #27362b;
  --line: #d9d6c9;
  --coral: #e76c52;
  --green: #56755b;
  --yellow: #e8bb58;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Fraunces, serif; font-weight: 500; letter-spacing: 0; }
h1 { color: var(--ink); }
button, select { font: inherit; }
.brand { color: var(--ink); font-family: 'DM Sans', sans-serif; letter-spacing: 0; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; }
.button, .btn, .back-btn, .nav-link { border-radius: 4px; font-family: 'DM Sans', sans-serif; letter-spacing: .01em; }
.button.primary, .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button:hover, .btn:hover, .back-btn:hover, .nav-link:hover { border-color: var(--coral); }
.topbar { min-height: 64px; }
.hero, .hero-copy, .hero-visual, .hero-image, .section, .main-panel, .side-panel, .provider-card, .panel { border-radius: 2px; }
.hero-copy, .section, .main-panel, .side-panel, .provider-card, .panel { box-shadow: 0 8px 24px rgba(39, 54, 43, .06); }
.hero-copy { border-left: 3px solid var(--coral); }
.eyebrow { color: var(--coral); font-family: 'DM Mono', monospace; letter-spacing: .1em; }
.pill, .highlight, .tag, .stat { border-radius: 2px; }

/* Keep generated directory pages aligned with the main application. */
.container { max-width: 1184px; padding-top: 28px; }
.topbar { min-height: 64px; margin-bottom: 28px; }
.nav-link, .back-btn, .button, .btn, .action-btn { border-radius: 4px; }
.button, .btn, .action-btn, .nav-link, .back-btn { transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.button.primary, .btn.primary, .action-btn.primary { background: var(--coral); border-color: var(--coral); color: var(--white); }
.button.dark, .action-btn.secondary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button:hover, .btn:hover, .action-btn:hover, .nav-link:hover, .back-btn:hover { border-color: var(--coral); transform: translateY(-1px); }
.hero-copy, .hero-visual, .hero-image, .section, .main-panel, .side-panel, .provider-card, .panel, .card { border-radius: 2px; box-shadow: 0 8px 24px rgba(39, 54, 43, .06); }
.hero-copy { border-left: 3px solid var(--coral); }
.eyebrow { font-family: 'DM Mono', monospace; color: var(--coral); }
.pill, .highlight, .tag, .stat { border-radius: 2px; }
.provider-card, .card { border-color: var(--line); }
.provider-card h3, .card h3, h1, h2, h3 { font-family: Fraunces, serif; font-weight: 500; letter-spacing: 0; }
.card-actions, .top-actions, .actions { align-items: stretch; }
.card-actions .btn { flex: 1 1 auto; }
.gallery img { border-radius: 2px; }

@media (max-width: 800px) {
  .container { padding: 20px 16px 64px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions, .actions, .card-actions { width: 100%; }
  .top-actions > a, .actions > a { flex: 1 1 auto; min-height: 44px; }
  .card-actions { flex-direction: column; }
  .card-actions .btn { width: 100%; }
  .hero-copy { border-left: 0; border-top: 3px solid var(--coral); }
}
@media (max-width: 800px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .topbar { gap: 12px; }
  .top-actions, .actions { width: 100%; }
  .top-actions > a, .actions > a { flex: 1 1 auto; min-height: 44px; }
}