html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #faf7f0; color: #0a0a0b; transition: background .3s, color .3s; }
.dark body { background: #0a0a0b; color: #f5f1ea; }
.serif { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', monospace; }
.grain::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .grain::after { opacity: .12; }
.bento { transition: transform .4s cubic-bezier(.2,.9,.25,1), box-shadow .4s; }
.bento:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(10,10,11,.25); }
.dark .bento:hover { box-shadow: 0 30px 50px -30px rgba(245,241,234,.2); }
.marquee { animation: scroll 45s linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.pulse-dot { position: relative; }
.pulse-dot::before { content:''; position:absolute; inset:-4px; border-radius:999px; background: currentColor; opacity:.3; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity:.3; } 50% { transform: scale(1.3); opacity:0; } }
.link-u { position:relative; }
.link-u::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.link-u:hover::after { transform: scaleX(1); }

/* Nav active state */
.nav-link.active { background: rgba(255,255,255,.15); }

/* Dark mode swaps */
.dark .bg-cream { background-color: #111113 !important; }
.dark .bg-bone { background-color: #1a1a1d !important; color: #f5f1ea; }
.dark .bg-bone.border { border-color: rgba(245,241,234,.1) !important; }
.dark .text-ink { color: #f5f1ea !important; }
.dark .text-ink\/80 { color: rgba(245,241,234,.8) !important; }
.dark .text-ink\/70 { color: rgba(245,241,234,.7) !important; }
.dark .text-ink\/60 { color: rgba(245,241,234,.6) !important; }
.dark .text-ink\/50 { color: rgba(245,241,234,.5) !important; }
.dark .border-ink\/10 { border-color: rgba(245,241,234,.1) !important; }
.dark .border-ink\/40 { border-color: rgba(245,241,234,.4) !important; }
.dark .ring-cream { --tw-ring-color: #111113 !important; }