@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-brand-primary: #b88a32;
  --color-brand-cta: #1a1814;
  --color-brand-success: #3d7a4f;
  --color-bg-dark: #f6f3ec;
  --color-bg-card: #ffffff;
  --color-bg-mid: #fbf8f1;
  --color-text-primary: #1a1814;
  --color-text-secondary: #6b6353;
  --color-border-accent: #b88a32;
  --color-border-subtle: #e8e2d3;
  --color-bg-light: #f6f3ec;
  --color-bg-card-light: #ffffff;
  --color-border-light: #e8e2d3;
  --color-text-dark: #1a1814;
  --color-text-mid: #6b6353;
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --shadow-card: 0 10px 30px rgba(26, 24, 20, 0.06);
  --shadow-card-hover: 0 18px 42px rgba(26, 24, 20, 0.1);
  --shadow-cta: 0 4px 20px rgba(26, 24, 20, 0.18);
  --shadow-glow: 0 0 60px rgba(184, 138, 50, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(184, 138, 50, 0.1), transparent 36rem),
    #f6f3ec !important;
  color: #1a1814 !important;
  font-family: var(--font-sans) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(26, 24, 20, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 24, 20, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 48rem);
}

nav[aria-label="Main navigation"] {
  background: rgba(246, 243, 236, 0.9) !important;
  border-bottom: 1px solid #e8e2d3 !important;
  box-shadow: none !important;
  padding: 0 48px !important;
}

.nav-logo,
.nav-logo span {
  color: #1a1814 !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.nav-logo svg stop:first-child,
footer svg stop:first-child {
  stop-color: #b88a32 !important;
}

.nav-logo svg stop:last-child,
footer svg stop:last-child {
  stop-color: #8a6520 !important;
}

.nav-logo svg text,
footer svg text {
  fill: #f6f3ec !important;
  font-family: var(--font-display) !important;
}

.nav-links a {
  color: #6b6353 !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #1a1814 !important;
}

.nav-actions a:not(.btn-nav),
.btn-cta-secondary {
  border-color: #e8e2d3 !important;
  color: #1a1814 !important;
  background: transparent !important;
}

.btn-nav,
.btn-subscribe,
.btn-cta,
.post-body .btn-cta,
footer button[type="submit"] {
  background: linear-gradient(135deg, #1a1814, #36302a) !important;
  color: #f6f3ec !important;
  border: 0 !important;
  box-shadow: 0 4px 20px rgba(26, 24, 20, 0.2) !important;
}

.blog-header,
.post-header {
  background:
    radial-gradient(circle at 50% -30%, rgba(184, 138, 50, 0.14), transparent 34rem),
    linear-gradient(180deg, #fbf8f1 0%, #f6f3ec 100%) !important;
  border-bottom: 1px solid #e8e2d3 !important;
}

.breadcrumb-bar {
  max-width: none !important;
  background: #fbf8f1 !important;
  border-top: 1px solid #e8e2d3 !important;
  border-bottom: 1px solid #e8e2d3 !important;
  padding: 18px 48px !important;
}

.breadcrumb {
  max-width: 1200px !important;
  margin: 0 auto !important;
  font-family: var(--font-sans) !important;
}

.breadcrumb li:last-child {
  color: #3d3830 !important;
}

.blog-eyebrow,
.post-category,
.card-category,
.related-card-category,
.filter-btn.active,
.keyword-tag,
.card-lang,
.post-meta span:first-child {
  background: #f3ead4 !important;
  border-color: #e8e2d3 !important;
  color: #8a6520 !important;
}

.blog-header h1,
.post-title,
.card-title,
.newsletter-section h2,
.related-posts h3,
.sidebar-cta h3,
.post-body h2,
.post-body h3,
footer h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: #1a1814 !important;
}

.blog-header h1 em,
.card-cta,
.breadcrumb a:hover,
.post-body a,
.toc-list a:hover,
.related-card:hover .related-card-title {
  color: #b88a32 !important;
}

.blog-header p,
.post-subtitle,
.card-excerpt,
.post-date,
.post-read-time,
.card-read-time,
.breadcrumb,
.breadcrumb a,
.newsletter-section p,
.post-body p,
.post-body li,
.toc-list a,
.sidebar-cta p {
  color: #6b6353 !important;
}

.post-card,
.sidebar-cta,
.sidebar-toc,
.sidebar-keyword,
.related-card,
.newsletter-section,
.callout,
.stat-highlight,
.faq-item,
.comparison-table,
.post-hero {
  background: #ffffff !important;
  border: 1px solid #e8e2d3 !important;
  box-shadow: var(--shadow-card) !important;
}

.post-card:hover,
.related-card:hover {
  border-color: #d8d0bd !important;
  box-shadow: var(--shadow-card-hover) !important;
}

.filter-btn,
.card-keyword {
  border-color: #e8e2d3 !important;
  color: #6b6353 !important;
  background: #fbf8f1 !important;
}

.filter-btn:hover {
  border-color: #b88a32 !important;
  color: #1a1814 !important;
}

.card-image,
.post-hero {
  background:
    radial-gradient(circle at 28% 18%, rgba(184, 138, 50, 0.16), transparent 18rem),
    linear-gradient(135deg, #fbf8f1, #f0ebe0) !important;
}

.card-image svg,
.post-hero svg,
.post-hero img {
  filter: none;
}

.post-hero img {
  opacity: 1;
}

.post-hero {
  position: relative;
}

.post-hero::after {
  content: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(184, 138, 50, 0.08), transparent 18rem),
    linear-gradient(135deg, rgba(251, 248, 241, 0.06), rgba(246, 243, 236, 0.1));
  mix-blend-mode: soft-light;
}

.post-body {
  color: #3d3830 !important;
}

.post-body strong {
  color: #1a1814 !important;
}

.post-body blockquote,
.callout {
  background: #fbf8f1 !important;
  border-left: 3px solid #b88a32 !important;
}

.stat-highlight {
  background: #f3ead4 !important;
}

.stat-number {
  color: #8a6520 !important;
  font-family: var(--font-display) !important;
}

.comparison-table th {
  background: #fbf8f1 !important;
  color: #1a1814 !important;
}

.comparison-table td,
.comparison-table th {
  border-color: #e8e2d3 !important;
}

.faq-question {
  color: #1a1814 !important;
}

#progress-bar {
  background: linear-gradient(90deg, #b88a32, #8a6520) !important;
}

footer {
  background: #f6f3ec !important;
  border-top: 1px solid #e8e2d3 !important;
}

footer,
footer * {
  color: #6b6353 !important;
}

footer h3,
footer h4,
footer span {
  color: #1a1814 !important;
}

footer input {
  background: #ffffff !important;
  border-color: #e8e2d3 !important;
  color: #1a1814 !important;
}

footer a:hover {
  color: #1a1814 !important;
}

@media (max-width: 768px) {
  nav[aria-label="Main navigation"] {
    padding: 0 20px !important;
  }

  .nav-inner {
    height: 64px !important;
  }

  .nav-actions {
    display: none !important;
  }
}