/* =============================================================================
   SITE STYLES — madeleine.dev
   css/site.css
   Homepage-specific styles. Load after the shared package.
   Load order:
     node_modules/madeleines-shared-css/index.css
     css/site.css  ← this file
   ============================================================================= */

/* =============================================================================
   HOMEPAGE — DISPLAY TYPOGRAPHY
   index only. Large fluid type for the name/intro block.
   ============================================================================= */

/* The "Welcome! My name is" label — small, left-aligned, tight leading */
h2.welcome-intro {
  font-size:   1.1rem;
  text-align:  left;
  margin:      1.2em 0 0.2em 0;
  line-height: var(--leading-tight);
}

/* "Welcome!" — large fluid display */
.welcome {
  font-size: clamp(1.4em, 4vw, 2.2em);
}

/* "My name is" — slightly smaller fluid display */
.intro {
  font-size: clamp(1.2em, 3.2vw, 2em);
}

/* The name itself — largest, with subtle tracking */
.name {
  font-size:      clamp(2rem, 5vw, 3.6em);
  letter-spacing: 0.01em;
}