/* Home composition follows the published portfolio Home; case-study styles stay separate. */
body {
  --home-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
}

body::before,
.home-about::before {
  content: "";
  inset: -8px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--home-grain-image);
  animation: home-grain-drift 18s ease-in-out infinite alternate;
}
body::before { position: fixed; opacity: .22; }
.home-about::before { position: absolute; opacity: .17; }

.home-header-initial,
.home-header,
main,

@keyframes home-grain-drift {
  0% { transform: translate(0, 0); }
  32% { transform: translate(3px, -2px); }
  68% { transform: translate(-2px, 3px); }
  100% { transform: translate(2px, 1px); }
}

.home-container {
  width: min(var(--page-width), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.home-header-initial {
  position: absolute;
  inset: 0 0 auto;
  z-index: 19;
  height: 90px;
}
.home-header-initial__links {
  width: min(var(--page-width), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
  padding-top: 24px;
}

.home-hero {
  padding-top: 175px;
  padding-bottom: 90px;
}
.home-hero__intro h1 {
  color: #1c1c1c;
  font-size: clamp(42px, 3.45vw, 50px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.035em;
}
.home-hero__title-line { display: block; }

@keyframes home-title-arrive {
  from { opacity: 0; filter: blur(8px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero__title-line {
    animation: home-title-arrive 700ms cubic-bezier(.22, 1, .36, 1) 60ms both;
  }
  .home-hero__title-line + .home-hero__title-line { animation-delay: 260ms; }
}
.home-hero__intro p {
  max-width: 620px;
  margin-top: 21px;
  color: #252525;
  font-size: 20px;
  line-height: 1.55;
}
.home-about { position: relative; overflow: hidden; margin-top: 70px; background: #fff; }
.home-about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 620px) 400px;
  gap: 90px;
  min-height: 340px;
  padding-block: 48px 44px;
}
.home-about__experience,
.home-about__skills { list-style: none; margin: 0; padding: 0; }
.home-about__experience { display: grid; gap: 27px; }
.home-about__experience li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  font-size: 16px;
  line-height: 22px;
}
.home-about__experience li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: #101010;
}
.home-about__experience strong { display: block; color: #242424; font-weight: 400; }
.home-about__experience span { display: block; color: #a4a4a4; }
.home-about__skills {
  display: flex;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.home-about__skills li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 24px;
  border-radius: 100px;
  background: #f5f5f9;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.home-about__skills li:last-child { padding-inline: 37px; }

.home-work { width: min(var(--page-width), calc(100% - var(--page-gutter) - var(--page-gutter))); }
.home-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.home-work__grid > :nth-child(2)[data-site-motion="card-group"] { --site-motion-delay: 130ms; }
.home-project {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1.03;
  border-radius: 28px;
  color: #fff;
  text-decoration: none;
  transform: scale(1);
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}
.home-project__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-project__content {
  position: absolute;
  inset: 32px 34px auto;
  z-index: 3;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.home-project h2 {
  font-size: 21px;
  font-weight: 500;
  line-height: 27px;
}
.home-project p {
  margin-top: 3px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}
.home-project:hover { transform: scale(1.016); }
.home-project:focus-visible { outline-offset: 5px; }


@media (max-width: 1199px) {
  .home-about__inner { grid-template-columns: minmax(0, 1fr) 400px; gap: 54px; }
}

@media (max-width: 950px) {
  .home-hero__intro p { font-size: 18px; }
  .home-about__inner { grid-template-columns: minmax(0, 1fr) 340px; gap: 35px; }
  .home-about__skills li { padding-inline: 19px; }
}

@media (max-width: 900px) {
  .home-work__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-work__grid > :nth-child(2)[data-site-motion="card-group"] { --site-motion-delay: 0ms; }
  .home-project { aspect-ratio: 1.55; }
}

@media (max-width: 700px) {
  :root { --page-gutter: max(27px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .home-hero {
    padding-top: 128px;
    padding-bottom: 66px;
  }
  .home-hero__intro h1 { font-size: clamp(48px, 14vw, 60px); line-height: 1.07; }
  .home-hero__intro p { max-width: 360px; margin-top: 24px; font-size: 18px; line-height: 1.5; }

  .home-about { margin-top: 55px; }
  .home-about__inner { display: block; min-height: 0; padding-block: 58px 52px; }
  .home-about__experience { gap: 31px; }
  .home-about__experience li { font-size: 16px; line-height: 21px; }
  .home-about__skills { margin-top: 49px; }
  .home-about__skills li { min-height: 44px; padding-inline: 21px; }
  .home-about__skills li:last-child { padding-inline: 27px; }

  .home-work__grid { gap: 18px; }
  .home-project { aspect-ratio: .89; border-radius: 26px; }
  .home-project__content { inset: 24px 24px auto; }
  .home-project h2 { font-size: 19px; line-height: 24px; }
  .home-project p { font-size: 14px; line-height: 19px; }

}

@media (prefers-reduced-motion: reduce) {
  body::before, .home-about::before { animation: none; }
  .home-project { transition: none; }
  .home-project:hover { transform: none; }
}

@media (hover: none), (pointer: coarse) {
  .home-project:hover { transform: none; }
}

@media (max-width: 700px), (pointer: coarse) {
  body::before { opacity: .12; animation: none; }
  .home-about::before { opacity: .09; animation: none; }
}