@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --amber: #C4841D;
  --amber-light: #D4A050;
  --amber-bg: rgba(196,132,29,0.08);
  --amber-border: rgba(196,132,29,0.2);
  --teal: #1A6B5A;
  --teal-light: #2A8B74;
  --teal-bg: rgba(26,107,90,0.08);
  --cream: #FAF7F2;
  --warm-white: #FEFDFB;
  --bg: #FEFDFB;
  --surface: #FFFFFF;
  --border: #E8E2D9;
  --border-light: #F0EBE3;
  --text: #1A1A1A;
  --text-secondary: #6B6560;
  --text-muted: #9A9490;
  --green: #0F9960;
  --green-bg: rgba(15,153,96,0.08);
  --red: #D94C4C;
  --red-bg: rgba(217,76,76,0.08);
  --purple: #7C5CbF;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ═══ HEADER ═══ */
.site-header {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 24px;
}
.header-inner {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.header-brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-mark {
  width:36px;
  height:36px;
  border-radius:50%;
  border:2.5px solid var(--amber);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia,serif;
  font-weight:bold;
  font-size:14px;
  color:var(--amber);
  font-style:italic;
}
.brand-text {
  font-family:Georgia,serif;
  font-size:18px;
  color:var(--text);
  letter-spacing:0.5px;
}
.brand-text span { color:var(--amber); }
.site-nav {
  display:flex;
  gap:4px;
}
.site-nav a {
  padding:8px 14px;
  font-size:13px;
  font-weight:500;
  color:var(--text-secondary);
  text-decoration:none;
  border-radius:6px;
  transition:all 0.15s;
}
.site-nav a:hover { background:var(--amber-bg); color:var(--amber); }
.site-nav a.active { background:var(--amber); color:white; }

/* ═══ MAIN ═══ */
.container { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ═══ HERO ═══ */
.hero {
  padding:48px 0 32px;
}
.hero-label {
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--amber);
  margin-bottom:8px;
}
.hero h1 {
  font-family:Georgia,serif;
  font-size:36px;
  font-weight:400;
  color:var(--text);
  margin-bottom:8px;
  line-height:1.2;
}
.hero h1 em { font-style:italic; color:var(--amber); }
.hero-sub {
  font-size:16px;
  color:var(--text-secondary);
  max-width:600px;
}

/* ═══ STATS ROW ═══ */
.stats-row {
  display:flex;
  gap:16px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.stat-chip {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 16px;
}
.stat-dot { width:10px; height:10px; border-radius:50%; }
.stat-dot.red { background:var(--red); }
.stat-dot.amber { background:var(--amber); }
.stat-dot.green { background:var(--green); }
.stat-dot.teal { background:var(--teal); }
.stat-chip .num { font-size:18px; font-weight:700; color:var(--text); }
.stat-chip .label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }

/* ═══ FILTER TABS ═══ */
.filter-tabs {
  display:flex;
  gap:6px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  flex-wrap:wrap;
}
.filter-tab {
  background:none;
  border:1px solid var(--border);
  color:var(--text-secondary);
  padding:7px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.15s;
  font-family:inherit;
}
.filter-tab:hover { border-color:var(--amber); color:var(--amber); }
.filter-tab.active { background:var(--amber); color:white; border-color:var(--amber); }

/* ═══ CARDS ═══ */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 24px;
  transition:all 0.2s;
}
.card:hover {
  border-color:var(--amber-border);
  box-shadow:0 2px 12px rgba(196,132,29,0.08);
}
.card-title {
  font-size:14px;
  font-weight:600;
  color:var(--text);
  margin-bottom:4px;
}
.card-meta {
  font-size:13px;
  color:var(--text-muted);
}

/* ═══ PANEL (white card with header) ═══ */
.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--border-light);
}
.panel-title {
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.panel-badge {
  font-size:12px;
  font-weight:500;
  color:var(--amber);
  text-decoration:none;
  padding:4px 10px;
  border-radius:12px;
  background:var(--amber-bg);
}
.panel-badge:hover { background:var(--amber-border); }
.panel-body {
  padding:16px 20px;
}

/* ═══ CTA ═══ */
.cta-section {
  margin:48px 0;
  padding:40px;
  background:linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%);
  border-radius:16px;
  text-align:center;
}
.cta-section h3 {
  font-family:Georgia,serif;
  font-size:24px;
  color:white;
  margin-bottom:8px;
  font-weight:400;
}
.cta-section p { color:rgba(255,255,255,0.85); margin-bottom:20px; font-size:15px; }
.cta-btn {
  display:inline-block;
  background:white;
  color:var(--amber);
  padding:12px 32px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:all 0.15s;
}
.cta-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }

/* ═══ FOOTER ═══ */
.site-footer {
  border-top:1px solid var(--border);
  padding:24px 0;
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
}
.site-footer a { color:var(--amber); text-decoration:none; }

/* ═══ COMMENTARY ═══ */
.commentary {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin:32px 0;
}
.commentary-header {
  font-size:13px;
  font-weight:600;
  color:var(--amber);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
}
.commentary p {
  font-family:Georgia,serif;
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:12px;
}
.commentary p:last-child { margin-bottom:0; }
.commentary strong { color:var(--text); }

/* ═══ SEARCH ═══ */
.search-input {
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color 0.15s;
  width:240px;
}
.search-input:focus { border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-bg); }
.search-input::placeholder { color:var(--text-muted); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) {
  .stats-row { gap:8px; }
}
@media(max-width:640px) {
  .hero h1 { font-size:26px; }
  .header-inner { height:auto; min-height:56px; flex-wrap:wrap; gap:8px; padding:8px 0; }
  .site-nav { flex-wrap:wrap; gap:2px; }
  .site-nav a { padding:5px 8px; font-size:11px; }
  .stats-row { gap:8px; }
  .stat-chip { padding:8px 12px; flex:1; min-width:calc(50% - 8px); justify-content:center; }
  .cta-section { padding:28px 20px; }
  .hero { padding:32px 0 24px; }
  .hero-sub { font-size:14px; }
  .filter-tabs { gap:4px; }
  .filter-tab { padding:6px 12px; font-size:12px; }
  .brand-text { font-size:15px; }
  .search-input { width:100%; }
  .panel-body { padding:12px 16px; }
  .commentary { padding:16px; }
}