html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dark body {
  background-color: var(--bg);
  color: var(--text);
}

.bg-grid {
  background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

::selection {
  background-color: #2563eb;
  color: white;
}

.glass {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.card-glow {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-glow:hover {
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: var(--card-glow-hover);
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hover-pause:hover {
  animation-play-state: paused;
}

/* Article Drop Cap - James Clear Style */
.article-content>p:first-of-type::first-letter {
  font-size: 120px;
  font-weight: 700;
  line-height: 0.85;
  float: left;
  margin-right: 14px;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  color: #09090b;
}

.dark .article-content>p:first-of-type::first-letter {
  color: #f4f4f5;
}

/* First paragraph gets extra top margin for drop cap */
.article-content>p:first-of-type {
  margin-top: 3rem;
}

:root {
  --bg: #FAF7F2;
  --bg-grid: rgba(26, 26, 46, 0.04);
  --text: #1A1A2E;
  --text-soft: #4A4A5A;
  --text-muted: #8A8A9A;
  --border: #E8E4DE;
  --surface-card: #FFFFFF;
  --surface-card-hover: #FFFCF7;
  --nav-bg: rgba(250, 247, 242, 0.9);
  --nav-border: rgba(0, 0, 0, 0.06);
  --radius: 12px;
  --radius-sm: 6px;
  --header-font: 'DM Serif Display', Georgia, serif;
  --header-weight: 400;
  --transition-micro: 200ms;
  --transition-standard: 300ms;
  --card-glow: 0 1px 2px rgba(26, 26, 46, 0.04);
  --card-glow-hover: 0 4px 12px rgba(37, 99, 235, 0.06), 0 1px 3px rgba(26, 26, 46, 0.04);
}

.dark {
  --bg: #000000;
  --bg-grid: rgba(255, 255, 255, 0.02);
  --text: #f4f4f5;
  --text-soft: #a1a1aa;
  --text-muted: #52525b;
  --border: #27272a;
  --surface-card: #09090b;
  --surface-card-hover: #111113;
  --nav-bg: rgba(0, 0, 0, 0.85);
  --nav-border: rgba(255, 255, 255, 0.06);
  --radius: 8px;
  --radius-sm: 6px;
  --header-font: 'Inter', sans-serif;
  --header-weight: 700;
  --card-glow: none;
  --card-glow-hover: 0 0 15px rgba(37, 99, 235, 0.05);
}