/* Reskins the embedded real-site project pages to match the V6 homepage's
   design tokens (typography, color, WI nav badge). Layout/structure from the
   original build is left untouched — only the token values are remapped. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --default-font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --bg: #f0f0f2;
  --card: #ffffff;
  --ink: #131315;
  --ink-secondary: #6d6d73;
  --hairline: #e2e2e5;
  --accent: #ff5d3a;
  --accent-soft: #ff8a68;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
}

/* Nav "WI" badge — replaces the photo avatar, same treatment as the
   homepage's dark pill Contact button (--ink bg, white text). Done in CSS
   only (hide the <img>, draw the initials via ::after) because this nav is
   a hydrated React component: editing the markup directly gets reverted by
   React the moment the page hydrates. */
a[aria-label="Home"] img {
  display: none;
}
a[aria-label="Home"] > span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}
a[aria-label="Home"] > span::after {
  content: "WI";
  color: #fff;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Equal-height 2-up/3-up image groups (e.g. the "Previous Version Analysis"
   pair). Each image's wrapper has no explicit height, so with mismatched
   source aspect ratios the pair renders at mismatched heights. The grid
   already stretches its direct children to a shared row height by default;
   this just carries that height down through the wrapper to the <img
   class="h-full ... object-cover">, which then crops each image to match. */
.grid.md\:grid-cols-2 > div,
.grid.md\:grid-cols-3 > div {
  height: 100%;
}
.grid.md\:grid-cols-2 > div > .overflow-hidden,
.grid.md\:grid-cols-3 > div > .overflow-hidden {
  height: 100%;
}