/* Site-wide visual system. Loaded last on every page so that all pages share
   one palette, one content width and one set of components. */

:root,
html.light {
  --paper: #ffffff;
  --card: #ffffff;
  --soft: #f5f5f4;
  --ink: #0b0b0c;
  --muted: #5d6066;
  --faint: #6c6f75;
  --green: #2456e6;
  --line: #e7e7e9;
  --accent: #dbe5ff;
  --button: #0b0b0c;
  --button-text: #ffffff;
  --button-hover: #2b2b2e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(0, 0, 0, .12);
  color-scheme: light;
}

html.dark {
  --paper: #0b0b0c;
  --card: #151517;
  --soft: #202023;
  --ink: #f2f2f3;
  --muted: #a9acb2;
  --faint: #8e9197;
  --green: #8fb0ff;
  --line: #2a2a2e;
  --accent: #dbe5ff;
  --button: #ffffff;
  --button-text: #0b0b0c;
  --button-hover: #e6e6e8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- Page canvas ---------- */
html { background: var(--paper); scroll-behavior: smooth; }
html.light body.font-inter,
html.dark body.font-inter {
  background: var(--paper) !important;
  color: var(--ink);
  overflow-x: clip !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.font-inter > div.relative { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.font-inter > div.relative > main { flex: 1 0 auto; width: 100%; }
body.font-inter > div.relative > footer { margin-top: 5rem !important; }
div.decorative-blob { display: none !important; }
.hero-gradient { background: none !important; }
::selection { background: var(--accent); color: #0b0b0c; }

/* Earlier overrides clipped focus rings, shadows and animated text. */
main, main > div, main > div > div, .prose { overflow: visible !important; }

/* ---------- Content widths ---------- */
.max-w-7xl { max-width: 80rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-md { max-width: 28rem !important; }
@media (min-width: 1024px) {
  .lg\:max-w-5xl { max-width: 65rem !important; }
  .lg\:max-w-3xl { max-width: 52rem !important; }
}

/* ---------- Colour mapping for utility classes ---------- */
.text-zinc-900, .text-zinc-800 { color: var(--ink) !important; }
.text-zinc-700, .text-zinc-600 { color: var(--muted) !important; }
.text-zinc-500, .text-zinc-400 { color: var(--faint) !important; }
html.dark .dark\:text-zinc-100, html.dark .dark\:text-zinc-200 { color: var(--ink) !important; }
html.dark .dark\:text-zinc-300, html.dark .dark\:text-zinc-400 { color: var(--muted) !important; }
html.dark .dark\:text-zinc-500 { color: var(--faint) !important; }
html.light h1.text-4xl, html.dark h1.text-4xl {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  letter-spacing: -.04em;
  line-height: 1.05;
  font-weight: 650;
  text-wrap: balance;
}
.text-teal-700, .text-teal-600, .text-teal-500,
html.dark .dark\:text-teal-400 { color: var(--green) !important; }
.hover\:text-teal-700:hover, .hover\:text-teal-600:hover, .hover\:text-teal-500:hover,
html.dark .dark\:hover\:text-teal-400:hover, html.dark .dark\:hover\:text-teal-300:hover,
.group:hover .group-hover\:text-teal-600, html.dark .group:hover .dark\:group-hover\:text-teal-400 { color: var(--green) !important; }
.border-zinc-100, .border-zinc-200,
html.dark .dark\:border-zinc-700, html.dark .dark\:border-zinc-700\/40 { border-color: var(--line) !important; }
html.light .bg-white, html.dark .dark\:bg-zinc-900 { background: var(--card) !important; }
.bg-zinc-100, html.dark .dark\:bg-zinc-800, html.dark .dark\:bg-zinc-800\/50 { background: var(--soft) !important; border-color: var(--line) !important; }

a, button, input { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .2s ease !important; }
:is(a, button, summary):focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ---------- Header ---------- */
body.font-inter header.pointer-events-none { padding-top: .5rem !important; }
header nav.pointer-events-auto ul { gap: .25rem; margin-left: -.875rem; }
header nav.pointer-events-auto ul a {
  padding: .5rem .875rem !important;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted) !important;
}
header nav.pointer-events-auto ul a:hover { color: var(--ink) !important; background: color-mix(in srgb, var(--ink) 6%, transparent); }
header nav.pointer-events-auto ul a.text-teal-700 { color: var(--ink) !important; background: color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 600; }
header .fill-zinc-500 { fill: var(--faint) !important; }
header a:hover .fill-zinc-500 { fill: var(--ink) !important; }
header button[aria-label="Toggle dark mode"], #mobile-menu-btn {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  color: var(--ink) !important;
}
header button[aria-label="Toggle dark mode"]:hover, #mobile-menu-btn:hover { border-color: var(--green) !important; }
header button[aria-label="Toggle dark mode"] svg { fill: none !important; stroke: var(--muted) !important; width: 1.25rem; height: 1.25rem; }
#mobile-menu-panel { background: var(--card) !important; border: 1px solid var(--line); box-shadow: var(--shadow) !important; }
#mobile-menu-panel a.block:hover { background: var(--soft) !important; }
@media (max-width: 767px) {
  header .flex.items-center.gap-4.pointer-events-auto.hidden { display: none !important; }
}

/* ---------- Footer ---------- */
body.font-inter footer { border-color: var(--line) !important; }
body.font-inter footer .pt-10 { padding-top: 1.75rem !important; padding-bottom: 2.5rem !important; }
body.font-inter footer p { color: var(--faint) !important; font-size: .875rem; }
body.font-inter footer a { color: var(--muted); }
body.font-inter footer a:hover { color: var(--ink) !important; }

/* ---------- Home ---------- */
main#main-content > div > div > div > div > .grid.lg\:grid-cols-2 { padding-top: 2.5rem; column-gap: 5rem; }
@media (min-width: 1024px) {
  main#main-content .grid.lg\:grid-cols-2 { grid-template-columns: 1.25fr 1fr !important; }
  main#main-content .grid.lg\:grid-cols-2 > .lg\:pr-20 { padding-right: 0 !important; max-width: 36rem !important; }
  main#main-content .grid.lg\:grid-cols-2 > .lg\:pl-20 { padding-left: 0 !important; max-width: none !important; }
  main#main-content .grid.lg\:grid-cols-2 h1.text-4xl { font-size: 4rem; }
}
main#main-content .prose-lg { color: var(--muted); font-size: 1.1875rem; line-height: 1.65; }
main#main-content .prose-lg:first-of-type { color: var(--ink); font-size: 1.375rem; line-height: 1.5; letter-spacing: -.015em; }
main#main-content p.prose:not(.prose-lg) { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.25rem; margin-top: 2rem; }
main#main-content p.prose:not(.prose-lg) > span { display: none; }
main#main-content p.prose:not(.prose-lg) > a { font-weight: 600; font-size: 1rem; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent) !important; color: var(--ink) !important; }
main#main-content p.prose:not(.prose-lg) > a:first-child {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .75rem 1.375rem;
  background: var(--button); color: var(--button-text) !important; border-radius: 999px; text-decoration: none !important;
}
main#main-content p.prose:not(.prose-lg) > a:first-child:hover { background: var(--button-hover); transform: translateY(-1px); }
[data-home-articles] { border-top: 1px solid var(--line); }
[data-home-articles] > a { display: block; margin: 0 !important; padding: 1rem 0; border-bottom: 1px solid var(--line); }
[data-home-articles] > a h3 { font-size: 1.0625rem; font-weight: 550; line-height: 1.4; letter-spacing: -.01em; color: var(--ink) !important; }
[data-home-articles] > a:hover h3 { color: var(--green) !important; }
[data-home-articles] > a p { font-size: .8125rem; margin-top: .25rem; }
main#main-content h2.text-lg { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; font-weight: 600; }

/* ---------- Articles index ---------- */
main > .hero-gradient { padding-top: 3.5rem !important; padding-bottom: 1.5rem !important; }
main > .hero-gradient p.text-lg { font-size: 1.1875rem; line-height: 1.6; }
.article-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
.article-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 55%, var(--line)) !important; box-shadow: var(--shadow) !important; }
.article-card img { width: 100% !important; height: 100% !important; object-fit: cover; }
.article-card > .p-4 { padding: 1.25rem 1.375rem 1.375rem !important; }
.article-card a.font-semibold { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.015em; }
.article-card p.text-sm { font-size: .9375rem; line-height: 1.6; }
.line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.article-card .rounded-full, [data-tag-filter] .rounded-full, article.prose header a.rounded-full {
  background: var(--soft) !important; border: 0 !important; color: var(--ink) !important;
  padding: .25rem .75rem !important; font-size: .8125rem !important; font-weight: 500; text-decoration: none !important;
}
.article-card .rounded-full:hover, article.prose header a.rounded-full:hover { background: var(--accent) !important; color: #0b0b0c !important; }
[data-articles-pagination] a { border-color: var(--line) !important; border-radius: 999px !important; color: var(--ink) !important; }
[data-articles-pagination] a:hover { background: var(--soft) !important; border-color: var(--green) !important; }

/* ---------- Article reading layout ---------- */
main > div > div > div > div:has(> article.prose) { max-width: 46rem !important; padding-top: 2.5rem; }
article.prose {
  --tw-prose-body: var(--muted);
  --tw-prose-headings: var(--ink);
  --tw-prose-lead: var(--muted);
  --tw-prose-links: var(--ink);
  --tw-prose-bold: var(--ink);
  --tw-prose-counters: var(--faint);
  --tw-prose-bullets: color-mix(in srgb, var(--green) 60%, transparent);
  --tw-prose-hr: var(--line);
  --tw-prose-quotes: var(--ink);
  --tw-prose-quote-borders: var(--accent);
  --tw-prose-captions: var(--faint);
  --tw-prose-th-borders: var(--line);
  --tw-prose-td-borders: var(--line);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.8;
  border-bottom: 0 !important;
}
html.light article.prose { --tw-prose-body: #3f4247; color: #3f4247; }
article.prose > header { margin-bottom: 2.5rem !important; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
article.prose > header h1 { font-size: clamp(2.125rem, 5vw, 3rem) !important; line-height: 1.1 !important; margin-bottom: 1.25rem !important; }
article.prose > header > p { order: 3; margin: 1rem 0 0 !important; font-size: .875rem; }
article.prose > header { display: flex; flex-direction: column; }
article.prose > header > div.flex { margin: 0; }
article.prose .prose-content :is(h2, h3) { color: var(--ink); letter-spacing: -.025em; text-wrap: balance; }
article.prose .prose-content h2 { font-size: 1.75rem; line-height: 1.25; margin-top: 2.75rem; }
article.prose .prose-content h3 { font-size: 1.3125rem; line-height: 1.35; }
html .prose a, html.dark .prose a {
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--green) 55%, transparent);
  text-underline-offset: 3px;
}
html .prose a:hover, html.dark .prose a:hover { color: var(--green) !important; text-decoration-color: currentColor; }
article.prose .prose-content img { border-radius: 12px; border: 1px solid var(--line); }
article.prose .prose-content pre { border-radius: 12px; border: 1px solid var(--line); font-size: .875rem; line-height: 1.65; }
article.prose .prose-content :not(pre) > code {
  background: var(--soft); color: var(--ink); border-radius: 6px; padding: .125rem .375rem; font-size: .875em; font-weight: 500;
}
article.prose .prose-content :not(pre) > code::before, article.prose .prose-content :not(pre) > code::after { content: none; }
article.prose .prose-content blockquote { font-style: normal; border-left-width: 3px; color: var(--ink); }

/* ---------- About ---------- */
.prose-about { max-width: 65ch !important; }
.prose-about p { color: var(--muted) !important; }
html.light .prose-about p { color: #3f4247 !important; }
.prose-about > p:first-child { color: var(--ink) !important; font-size: 1.375rem; line-height: 1.5; letter-spacing: -.015em; }
.prose-about h2 { color: var(--ink) !important; letter-spacing: -.03em; margin-top: 3rem !important; }
.prose-about a { color: var(--ink) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: color-mix(in srgb, var(--green) 55%, transparent) !important; text-underline-offset: 3px; border: 0 !important; }
.prose-about a:hover { color: var(--green) !important; }

/* ---------- Cards (contact, shared) ---------- */
.content-card, .experience-card, .contact-card,
html.dark .content-card, html.dark .experience-card, html.dark .contact-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 1.5rem;
}
.content-card::before, .experience-card::before { display: none !important; }
.content-card:hover, .experience-card:hover, .contact-card:hover,
html.dark .experience-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--green) 55%, var(--line)) !important;
  box-shadow: var(--shadow) !important;
}
.experience-card > .w-12 {
  background: var(--soft) !important; color: var(--ink) !important; border-radius: 12px !important;
  display: flex; align-items: center; justify-content: center;
}
.experience-card:hover > .w-12 { background: var(--accent) !important; color: #0b0b0c !important; }
.experience-card > .w-12 svg, .experience-card > .w-12 .text-white { color: inherit !important; }
.experience-card h3 svg { display: none; }
.experience-card h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
main .text-center h1.text-4xl + p { font-size: 1.1875rem; line-height: 1.6; }
main .inline-flex.rounded-full.bg-zinc-100 { background: var(--soft) !important; color: var(--ink) !important; border: 0 !important; }

/* ---------- Case-study and résumé pages ---------- */
.consulting-page, .dark .consulting-page { --ink: inherit; --muted: inherit; --line: inherit; --surface: var(--card); }
html.light .consulting-page { --ink: #0b0b0c; --muted: #5d6066; --line: #e7e7e9; }
html.dark .consulting-page { --ink: #f2f2f3; --muted: #a9acb2; --line: #2a2a2e; }
.consulting-page .eyebrow { color: var(--muted); font-size: .75rem; letter-spacing: .14em; }
.consulting-page h1 { font-weight: 650; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.consulting-page h2 { font-size: 1.875rem; letter-spacing: -.035em; font-weight: 650; }
.consulting-page .lead { font-size: 1.1875rem; line-height: 1.65; }
.consulting-hero { padding: 72px 0 48px; }
.consulting-section { padding: 48px 0; }
.consulting-page .section-heading { margin-bottom: 28px; }
.consulting-page .button, .dark .consulting-page .button {
  min-height: 50px; padding: 12px 24px; border-radius: 999px;
  background: var(--button); border-color: var(--button); color: var(--button-text); font-size: .9375rem;
}
.consulting-page .button:hover { background: var(--button-hover); border-color: var(--button-hover); transform: translateY(-1px); }
.consulting-page .button.secondary, .dark .consulting-page .button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.consulting-page .button.secondary:hover { background: var(--card); border-color: var(--green); }
.consulting-page :is(a, summary):focus-visible, .dark .consulting-page :is(a, summary):focus-visible { outline-color: var(--green); }
.consulting-page .text-link, .dark .consulting-page .text-link,
.consulting-card .card-label, .dark .consulting-card .card-label,
.resume-page .role-company, .dark .resume-page .role-company { color: var(--green); }
.resume-page .resume-highlights li::before { color: var(--green); }
.consulting-page .jump-links a { text-decoration-color: color-mix(in srgb, var(--green) 50%, transparent); text-decoration-thickness: 1px; }
.consulting-page .jump-links a:hover { color: var(--ink); }
.consulting-card, .consulting-page .case-study, .consulting-page .contact-panel, .resume-page .resume-highlights { border-radius: 14px; background: var(--card); }
.consulting-page .case-study { padding: 36px; transition: border-color .2s ease, box-shadow .2s ease; }
.consulting-page .case-study:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); box-shadow: var(--shadow); }
.consulting-page .case-study h3 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.25; }
.consulting-page .case-meta { color: var(--muted); font-weight: 600; font-size: .8125rem; letter-spacing: .04em; }
.consulting-page .case-facts { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.consulting-page .case-facts dt { color: var(--ink); font-size: .75rem; letter-spacing: .1em; }
.consulting-page .contact-panel { padding: 40px; background: var(--soft); }
html.dark .consulting-page .contact-panel { background: var(--card); }
.resume-page .resume-subtitle { font-size: 1.25rem; }
.resume-page .role-heading h3 { font-size: 1.125rem; letter-spacing: -.015em; }

@media (max-width: 760px) {
  .consulting-page .case-study { padding: 24px; }
  .consulting-page .contact-panel { padding: 26px; }
  .consulting-hero { padding: 44px 0 32px; }
  .consulting-section { padding: 34px 0; }
  article.prose { font-size: 1.0625rem; line-height: 1.75; }
  main#main-content > div > div > div > div > .grid.lg\:grid-cols-2 { padding-top: 1rem; row-gap: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, a, button, input { animation: none !important; transition: none !important; }
  [class*="animate-"], [class*="delay-"], .article-card { opacity: 1 !important; transform: none !important; }
}

@media print {
  html, html.dark, html.dark .consulting-page {
    --paper: #fff; --card: #fff; --soft: #fff; --ink: #111; --muted: #333; --faint: #444;
    --green: #111; --line: #ccc; --surface: #fff; --button: #111; --button-text: #fff;
  }
  html, html.light body.font-inter, html.dark body.font-inter { background: #fff !important; }
}

/* Small utilities missing from the compiled stylesheet. */
.bg-green-500 { background: #4d9a62; }
.article-card p.text-xs { margin-bottom: .5rem !important; font-size: .8125rem; }
main#main-content .prose-lg + .prose-lg { margin-top: 1rem !important; }