/* Homepage-only type roles. Case studies keep their locked styling. */
.home-page .work-project-link[data-search-launch="soon"] {
  border-bottom: 0;
  text-decoration: none;
  cursor: default;
}

.home-page {
  --home-project-title: 3.7rem;
  --home-chapter-title: 3rem;
  --home-card-title: 1.75rem;
  --home-body: 1.125rem;
  --home-link: 1.125rem;
  --home-heading-weight: 700;
  --home-body-weight: 460;
  --home-link-weight: 650;
}

.home-page .selected-work-layout .work-project-copy h3,
.home-page .freshness-home-copy h3 {
  font-family: inherit;
  font-size: var(--home-project-title);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: var(--display-letter-spacing);
}

.home-page .selected-work-layout #selected-work-title,
.home-page .career-opening h2,
.home-page .cv-motion-opening h3,
.home-page .recommendations-header h2,
.home-page .experience-header h2 {
  font-size: var(--home-chapter-title);
  font-weight: var(--home-heading-weight);
  line-height: 1.1;
  letter-spacing: var(--display-letter-spacing);
}

.home-page .cv-project-heading h3,
.home-page .cv-motion-caption h4 {
  font-size: var(--home-card-title);
  font-weight: var(--home-heading-weight);
  line-height: 1.2;
  letter-spacing: var(--display-letter-spacing);
}

.home-page .selected-work-layout .work-project-copy > p,
.home-page .freshness-home-copy > p,
.home-page .cv-project-description,
.home-page .cv-motion-intro,
.home-page .career-tagline,
.home-page .experience-header > p:not(.chapter-kicker):not(.experience-number) {
  font-size: var(--home-body);
  font-weight: var(--home-body-weight);
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.home-page .freshness-home-copy > p { max-width: 23rem; color: var(--portfolio-body); }
.home-page .freshness-home-copy > p br { display: block; }

.home-page .selected-work-layout .work-project-link,
.home-page .freshness-home-copy .work-project-link,
.home-page .cv-project-cta {
  font-size: var(--home-link);
  font-weight: var(--home-link-weight);
  line-height: 1.25;
}

.home-page .career-eyebrow,
.home-page .chapter-kicker,
.home-page .selected-work-label {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

/* Original frames + actual screens are precomposed at their native resolution.
   Avoid SVG foreignObject + CSS perspective: iOS can paint it outside the mask. */
.home-page .cv-product-visual { --cv-visible-phone-height: clamp(21rem, 35vw, 24rem); }
/* Match the visible hardware, not the unequal transparent margins in the files.
   Original opaque silhouettes: Sensei y=230…1354; My11Circle y=206…1367. */
.home-page .cv-sensei-device.cv-real-device {
  height: calc(var(--cv-visible-phone-height) * 1.474666667);
  top: calc(1rem - var(--cv-visible-phone-height) * 0.204444444);
}
.home-page .cv-my11-device.cv-real-device {
  left: 50%;
  height: calc(var(--cv-visible-phone-height) * 1.427710843);
  top: calc(1rem - var(--cv-visible-phone-height) * 0.177280551);
}
.home-page .cv-original-phone { display: block; object-fit: contain; }

/* Static artwork remains visible with no JavaScript, no video source, reduced
   motion or rejected autoplay. It keeps the existing CSS float animation. */
.home-page .character video.character-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.home-page .character.has-playing-video video.character-media { opacity: 1; }
.home-page .character.has-playing-video .character-poster { opacity: 0; }
.home-page .cv-outcomes dd {
  font-size: 1.25rem;
  font-weight: var(--home-heading-weight);
  color: var(--portfolio-ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.home-page .cv-metric-my11-three { width: 7.5rem; }

/* A shared, softly raised icon tile: no new library or external assets. */
.home-page .contact-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  color: var(--portfolio-ink);
  background: #f2eff9;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 4px 12px rgb(58 41 89 / 5%);
  transition: transform 180ms ease, background-color 180ms ease;
}
.home-page .contact-icon svg { width: 1.4rem; height: 1.4rem; stroke-width: 1.65; }
.home-page .contact-email:hover .contact-icon,
.home-page .contact-resource:has(a:not([hidden])):hover .contact-icon {
  transform: translateY(-2px) rotate(-3deg);
  background: #e9e3f7;
}
.home-page .contact-resource:has([data-contact-linkedin-pending]:not([hidden])) .contact-icon {
  background: #f3f2f5;
  color: var(--portfolio-muted);
}
.home-page .contact-socials { gap: 1rem 1.5rem; }

@media (max-width: 1121px) {
  .home-page {
    --home-project-title: clamp(2.1rem, 4.3vw, 3.1rem);
    --home-chapter-title: clamp(2.25rem, 4.5vw, 3rem);
    --home-card-title: clamp(1.5rem, 2.5vw, 1.75rem);
    --home-body: 1.08rem;
    --home-link: 1rem;
  }
}
@media (max-width: 650px) {
  .home-page { --home-project-title: clamp(2.4rem, 9.6vw, 3rem); --home-body: 1.0625rem; }
  /* Let the product breathe at phone widths. Keep floating metrics on desktop;
     on touch screens place the same three results beneath the phone. */
  .home-page .cv-product-visual {
    width: 100%;
    height: auto;
    padding-top: calc(var(--cv-visible-phone-height) + 2.25rem);
  }
  .home-page .cv-outcomes {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
  .home-page .cv-outcomes .cv-metric {
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: .625rem .5rem;
    justify-content: flex-end;
    animation: none;
  }
  .home-page .cv-outcomes dd { font-size: clamp(.875rem, 4.3vw, 1.125rem); }
  .home-page .cv-outcomes dt { font-size: .75rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .contact-icon { transition: none; }
}