/* mohsin.io design tokens — slate + teal on warm ivory paper.
   Ported from the Next.js directory app (globals.css). */
:root {
  --background: #faf8f3;            /* paper-1 */
  --foreground: #0f172a;            /* slate-900 */
  --card: #ffffff;
  --primary: #1e293b;               /* brand slate-800 */
  --primary-foreground: #ffffff;
  --secondary: #f2efe7;             /* paper-2 */
  --muted: #f2efe7;
  --muted-foreground: #5b6a82;      /* AA-safe muted slate */
  --accent-strong: #1a6f63;         /* AA-safe teal for text */
  --border: rgba(15, 23, 42, 0.1);
  --radius: 0.75rem;
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dark {
  --background: #0f172a;            /* slate-900 */
  --foreground: #e9edf4;            /* text-on-inverse */
  --card: #1e293b;                  /* slate-800 */
  --primary: #2a9d8f;               /* teal-500 */
  --primary-foreground: #ffffff;
  --secondary: #243149;             /* slate-700 */
  --muted: #243149;
  --muted-foreground: #94a3b8;      /* text-muted-on-inverse */
  --accent-strong: #7fc9bf;         /* teal-300 for text on dark */
  --border: rgba(255, 255, 255, 0.16);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
}

::selection { background: #dcf0ed; color: #0f172a; }

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  user-select: none;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card);
  padding: 0.375rem 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wm-name { font-size: 0.875rem; font-weight: 800; letter-spacing: -0.02em; }
.wm-x { font-size: 0.75rem; color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); }
.wm-site {
  font-size: 0.875rem; font-weight: 700; text-decoration: none;
  color: var(--muted-foreground);
  transition: color 0.15s;
}
.wm-site:hover { color: var(--foreground); }
.wm-site .io { color: var(--accent-strong); }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.8);
  background: var(--card); color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s;
}
.theme-toggle:hover { background: var(--secondary); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle .moon { display: none; }
.dark .theme-toggle .sun { display: none; }
.dark .theme-toggle .moon { display: block; }

/* ── Hero ── */
main { flex: 1; }
.main-inner { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 640px) {
  .main-inner { padding-top: 4rem; padding-bottom: 4rem; }
}

.hero { max-width: 42rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .hero { margin-bottom: 3.5rem; } }

.eyebrow {
  margin-bottom: 1rem;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-strong);
}
.hero h1 {
  font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em;
}
@media (min-width: 640px) { .hero h1 { font-size: 2.25rem; } }
.lede {
  margin-top: 0.75rem;
  line-height: 1.625; text-wrap: balance;
  color: var(--muted-foreground);
}

/* ── Card grid ── */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.4);
  background: var(--card);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-lg); }

.card-media {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--muted);
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s;
}
.card:hover .card-media img { transform: scale(1.03); }

.card-body {
  display: flex; flex: 1; flex-direction: column; gap: 0.75rem;
  padding: 1.25rem;
}
.card-body h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; }
.card-desc {
  font-size: 0.875rem; line-height: 1.625;
  color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tags span {
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--secondary);
  padding: 0.125rem 0.625rem;
  font-size: 11px; font-weight: 600;
  color: var(--muted-foreground);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: auto;
  height: 2.5rem; width: 100%;
  border: none; border-radius: calc(var(--radius) * 0.8);
  background: var(--primary); color: var(--primary-foreground);
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.9; }
.btn svg { width: 1rem; height: 1rem; }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--border); }
.footer-inner {
  display: flex; align-items: center; justify-content: center;
  height: 4rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.footer-inner a {
  color: inherit;
  text-underline-offset: 4px;
  transition: color 0.15s;
}
.footer-inner a:hover { color: var(--foreground); }