/* ==========================================================================
   Dimity Pascoe — Independent Economist & Public Policy Specialist
   Visual Identity: Black & White Editorial Palette
   ========================================================================== */

:root {
  --color-sage-bg: #ECECEC;
  --color-sage-light: #F2F2F2;
  --color-sage-border: #CFCFCF;
  --color-forest-text: #111111;
  --color-forest-dark: #0A0A0A;
  --color-hunter-accent: #111111;
  --color-hunter-hover: #000000;
  --color-stone-canvas: #FFFFFF;
  --color-stone-card: #FFFFFF;
  --color-stone-border: #E6E6E6;
  --color-body-muted: #555555;
  --color-body-subtle: #6B6B6B;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-forest-text);
  background-color: var(--color-stone-canvas);
  -webkit-font-smoothing: antialiased;
}

.font-editorial {
  font-family: 'Newsreader', Georgia, serif;
}

.font-sans-title {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Accent Header Stripe */
.accent-top-bar {
  height: 6px;
  background-color: var(--color-hunter-accent);
  width: 100%;
}

/* Hero Section */
.hero-banner {
  background-color: var(--color-sage-bg);
  color: var(--color-forest-text);
}

.btn-ghost-sage {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-forest-text);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--color-sage-border);
  border-radius: 4px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-ghost-sage:hover {
  background-color: var(--color-hunter-accent);
  border-color: var(--color-hunter-accent);
  color: #FFFFFF;
}

.btn-primary-hunter {
  background-color: var(--color-hunter-accent);
  color: #FFFFFF;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.btn-primary-hunter:hover {
  background-color: var(--color-hunter-hover);
}

/* Card Transitions */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--color-sage-border);
  box-shadow: 0 10px 25px -5px rgba(17, 17, 17, 0.06);
}

/* Media Cards */
.media-card {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.media-card:hover {
  border-left-color: var(--color-hunter-accent);
  background-color: #FFFFFF;
}