/* Shared base styles */
html { scrollbar-gutter: stable both-edges; color-scheme: light dark; overflow-y: scroll; }
body { font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace; }
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Navbar */
.nav-link {
  color: #374151;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-size 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover,
.nav-link:focus-visible {
  color: #111827;
  background-size: 100% 2px;
  outline: none;
}
.dark .nav-link { color: #d1d5db; }
.dark .nav-link:hover,
.dark .nav-link:focus-visible { color: #ffffff; }

.dark-mode-toggle { width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: #000; transition: all 0.2s; cursor: pointer; }
.dark .dark-mode-toggle { background-color: #fff; }

/* Blog styles */
.blog-heading { font-size: 1.5rem; font-weight: 600; color: #111827; text-decoration: underline; text-decoration-color: #9ca3af; text-underline-offset: 0.25rem; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.dark .blog-heading { color: #fff; text-decoration-color: #6b7280; }
.post-link { display: block; padding: 0.5rem 0; transition: background-color 0.2s; }
.post-link:hover { background-color: #f9fafb; }
.dark .post-link:hover { background-color: #1f2937; }
.post-date { font-size: 0.875rem; color: #6b7280; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.dark .post-date { color: #9ca3af; }
.post-title { font-size: 1.125rem; font-weight: 500; color: #111827; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.post-title a { color: inherit; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.post-title:hover { color: #374151; }
.dark .post-title { color: #fff; }
.dark .post-title:hover { color: #d1d5db; }

/* Single post helpers */
.breadcrumb { font-size: .875rem; color: #6b7280; }
.breadcrumb a { color: #6b7280; text-decoration: none; transition: color .2s cubic-bezier(0.4,0,0.2,1); }
.breadcrumb a:hover { color: #111827; }
.dark .breadcrumb { color: #9ca3af; }
.dark .breadcrumb a { color: #9ca3af; }
.dark .breadcrumb a:hover { color: #ffffff; }
.post-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.post-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.post-tag { padding: .125rem .5rem; background-color: #f3f4f6; color: #374151; font-size: .75rem; border-radius: .25rem; text-decoration: none; transition: background-color .2s cubic-bezier(0.4,0,0.2,1), color .2s cubic-bezier(0.4,0,0.2,1); }
.post-tag:hover { background-color: #e5e7eb; color: #111827; }
.dark .post-tag { background-color: #374151; color: #d1d5db; }
.dark .post-tag:hover { background-color: #4b5563; color: #ffffff; }

/* Projects styles */
.projects-heading { font-size: 1.5rem; font-weight: 600; color: #111827; text-decoration: underline; text-decoration-color: #9ca3af; text-underline-offset: 0.25rem; }
.dark .projects-heading { color: #fff; text-decoration-color: #6b7280; }
.project-card { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; transition: box-shadow 0.2s; }
.project-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.dark .project-card { border-color: #374151; }
.project-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: .5rem; }
.dark .project-title { color: #fff; }
.project-description { color: #6b7280; margin-bottom: 1rem; }
.dark .project-description { color: #9ca3af; }
.project-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.project-tag { padding: .25rem .5rem; background-color: #f3f4f6; color: #374151; font-size: .875rem; border-radius: .25rem; }
.dark .project-tag { background-color: #374151; color: #d1d5db; }
.project-links { display: flex; gap: 1rem; }
.project-link { color: #3b82f6; font-size: .875rem; }
.project-link:hover { text-decoration: underline; }
.dark .project-link { color: #60a5fa; }

/* Utility classes to remove inline styles */
.section-tight { margin-top: -2rem; }
.section-gap { margin-top: 1rem; }
.projects-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
 
/* Social icons */
.social-icons { display: flex; align-items: center; gap: 1.5rem; }
.social-icon { color: #374151; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.social-icon:hover { color: #111827; }
.dark .social-icon { color: #d1d5db; }
.dark .social-icon:hover { color: #ffffff; }
.social-icon svg { width: 1.5rem; height: 1.5rem; display: block; }
/* Ensure image-based icons match svg sizing */
.social-icon img { width: 1.5rem; height: 1.5rem; }

/* Letterboxd masked icon so it inherits currentColor and animates like others */
.social-icon .lbxd-icon {
  width: 2rem;
  height: 2rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: url('https://a.ltrbxd.com/logos/letterboxd-decal-dots-pos-mono.svg') no-repeat center / contain;
  mask: url('https://a.ltrbxd.com/logos/letterboxd-decal-dots-pos-mono.svg') no-repeat center / contain;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .social-icon .lbxd-icon {
  -webkit-mask: url('https://a.ltrbxd.com/logos/letterboxd-decal-dots-neg-mono.svg') no-repeat center / contain;
  mask: url('https://a.ltrbxd.com/logos/letterboxd-decal-dots-neg-mono.svg') no-repeat center / contain;
}

/* Theme transition utility - scope to body subtree to reduce repaint jitter */
body.theme-transition, body.theme-transition * {
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .theme-transition, .theme-transition * { transition: none !important; }
}

/* Blog list filter tabs: keep original button design, add subtle animation */
.tabs-animate button { transition: background-color .2s cubic-bezier(0.4,0,0.2,1), color .2s cubic-bezier(0.4,0,0.2,1); }

/* Small-screen tweaks */
@media (max-width: 640px) {
  .section-tight { margin-top: 0; }
  .projects-grid { grid-template-columns: 1fr; }
  .nav-link { display: inline-block; padding: .25rem 0; }
}