/* ===========================================================
   Additions on top of the Webflow "Olivia" stylesheet (assets/site.css, never edited).
   1. design tokens for the ⌘K palette and the chatbot (they were written against another theme)
   2. fallback when the Webflow runtime does not load
   3. "Made with Webflow" credit, rich text for project pages
   =========================================================== */

:root {
  /* Blue remap of the Olivia template's black/orange palette. */
  --black: #04070f;
  --bg: #fafafa; --bg-soft: #ffffff; --surface: #f3f3f3; --line: #e2e2e2;
  --text: #030303; --text-soft: #1a1a1a; --muted: #6b6b6b; --faint: #9a9a9a;
  --accent: #2563eb; --accent-dim: #1d4ed8; --on-accent: #ffffff; --glow: rgba(37, 99, 235, 0.18);
  --sans: Bdogrotesk, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---- 2. runtime missing: Webflow's CSS hides content until its scripts run; show it instead ---- */
html.wf-fallback [style*="opacity:0"], html.wf-fallback [style*="opacity: 0"], html.wf-fallback [data-w-id] { opacity: 1 !important; transform: none !important; }
html.wf-fallback .hero-bg-image, html.wf-fallback .navbar { visibility: visible !important; }
html.wf-fallback .w-nav-menu { display: block !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; background: none !important; }
html.wf-fallback .nav-link-wrap { display: flex !important; flex-direction: row !important; gap: 28px !important; align-items: center !important; }
html.wf-fallback .nav-link.big-text { font-size: 1rem !important; line-height: 1.4 !important; }
html.wf-fallback .nav-number, html.wf-fallback .nav-underline { display: none !important; }
html.wf-fallback .menu-button { display: none !important; }

/* ---- headings demoted from <h1> (one h1 per page) keep the h1 look ---- */
.as-h1 { font-size: var(--_typography---font-size--heading-h1); line-height: var(--_typography---line-height--line-height-m); letter-spacing: -1px; margin-top: 0; margin-bottom: 0; font-weight: 500; }

/* ---- 3. credit ---- */
.made-with { position: relative; z-index: 2; margin: 0; padding: 18px 0 30px; text-align: center; font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.78); }
.made-with a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.made-with a:hover, .made-with a:focus-visible { color: #fff; }

/* project pages: markdown rendered from _projects/*.md (the project pages are dark) */
.project-prose { max-width: 760px; margin: 0 auto; color: rgba(255, 255, 255, 0.82); font-size: 1.0625rem; line-height: 1.75; }
.project-prose > * + * { margin-top: 1.1em; }
.project-prose h2, .project-prose h3, .project-prose h4 { color: #fff; line-height: 1.2; margin-top: 2em; margin-bottom: 0; font-weight: 500; letter-spacing: -0.01em; }
.project-prose h2 { font-size: 1.9rem; } .project-prose h3 { font-size: 1.5rem; } .project-prose h4 { font-size: 1.2rem; }
.project-prose strong { color: #fff; font-weight: 600; }
.project-prose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.project-prose ul, .project-prose ol { padding-left: 1.3em; } .project-prose li + li { margin-top: 0.35em; }
.project-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.project-prose pre { overflow-x: auto; padding: 16px 18px; background: #111; color: #e6e6e6; border: 1px solid #2a2a2a; border-radius: 10px; font: 0.875rem/1.6 var(--mono); }
.project-prose code { font: 0.9em var(--mono); background: #1d1d1d; padding: 1px 6px; border-radius: 4px; color: #f2f2f2; }
.project-prose pre code { background: none; padding: 0; }
.project-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
.project-prose th, .project-prose td { border: 1px solid #2f2f2f; padding: 8px 12px; text-align: left; }
.project-prose hr { border: 0; border-top: 1px solid #2f2f2f; }
.project-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.project-links a { font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; }

/* ---- home: the stacked project cards (sticky) must be opaque, otherwise the titles of the cards underneath show through and overlap ---- */
.collection-list-wrap .project-card { background-color: #050a14; }

/* ---- Expertise: compact cards (the Webflow template leaves a 300px gap between icon and label) ---- */
.service-card { grid-row-gap: 48px; row-gap: 48px; grid-column-gap: 0; column-gap: 0; padding: 28px 32px; }
.service-info { align-items: flex-end; }
.service-left { grid-row-gap: 8px; row-gap: 8px; }
@media screen and (max-width: 479px) { .service-card { grid-row-gap: 32px; row-gap: 32px; padding: 20px; } }

/* ---- footer: social icons instead of two-letter abbreviations ---- */
.social-icon-wrap { align-items: center; gap: 18px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-bottom: 0; opacity: 0.85; transition: opacity .2s, transform .2s; }
.social-link svg { display: block; }
.social-link:hover, .social-link:focus-visible { opacity: 1; border-bottom: 0; transform: translateY(-1px); }