/* Homepage concept using the visual language of About me. */
.home-page { background:#090909; color:#f7f7f7; }
.home-page main { overflow:hidden; }
.home-page #hero {
  min-height:100svh;
  height:100svh;
  box-sizing:border-box;
  background:#090909;
  text-align:left;
  justify-content:center;
}
.home-page #hero::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(90deg,rgba(9,9,9,.93) 0%,rgba(9,9,9,.72) 48%,rgba(9,9,9,.18) 100%),linear-gradient(0deg,#090909 0%,transparent 35%);
  pointer-events:none;
}
.home-page #hero .hero__video { opacity:.5; filter:saturate(.65); }
.home-page #hero .hero__model { opacity:.15; }
.home-page #hero > .hero__content {
  top:50%; left:clamp(24px,8vw,120px); align-items:flex-start;
  width:min(680px,calc(100% - 48px)); transform:translateY(-42%);
}
.home-page .home-kicker { color:#fff36d; font:700 12px/1.4 var(--font-ibm); letter-spacing:.08em; }
.home-page #hero h1 {
  margin:20px 0 26px; color:#f7f7f7; font:700 clamp(76px,12vw,168px)/.78 var(--font-greycliff);
  letter-spacing:-.075em; text-align:left; text-shadow:none;
}
.home-page #hero h4 { color:#fff36d; font:700 clamp(14px,1.5vw,19px)/1.35 var(--font-ibm); letter-spacing:.03em; text-shadow:none; }
.home-page .home-intro { max-width:440px; margin:20px 0 18px; color:#ddd; font:400 14px/1.55 var(--font-ibm); }
.home-page #hero .action_btn { margin:10px 0 0; padding:12px 22px; gap:18px; border:1px solid rgba(255,243,109,.8); border-radius:0; background:#fff36d; box-shadow:none; color:#090909; font:700 12px var(--font-ibm); text-shadow:none; }
.home-page #hero .action_btn:hover { background:#f2ad73; color:#090909; }
.home-page .marquee { position:relative; z-index:2; display:block; width:100%; height:230px; min-height:0; margin:30px 0 42px; padding:0; overflow:hidden; background:none; }
.home-page .marquee-band { position:absolute; top:50%; left:-7.5%; width:115%; height:100px; display:flex; align-items:center; justify-content:space-around; gap:clamp(12px,2vw,28px); padding:0 4%; white-space:nowrap; }
.home-page .marquee-band--rainbow { transform:translateY(-50%) rotate(4deg); background:linear-gradient(105deg,#f8ee72 0%,#f2ad73 22%,#dc4760 50%,#9b3b7d 75%,#1489b4 100%); background-size:220% 220%; background-position:0% 50%; animation:skills-gradient-flow 10s ease-in-out infinite; }
.home-page .marquee-band--yellow { z-index:1; justify-content:flex-start; overflow:hidden; transform:translateY(-50%) rotate(-4deg); background:#fff36d; color:#090909; font:700 clamp(11px,1.3vw,17px)/1 var(--font-ibm); }
.home-page .marquee-content { display:flex; width:max-content; align-items:center; animation:home-marquee-scroll 28s linear infinite; will-change:transform; }
.home-page .marquee-set { display:flex; flex:none; align-items:center; gap:28px; padding-right:28px; }
.home-page .marquee-set > span:not(.marquee-sparkle) { flex:0 0 170px; text-align:center; }
.home-page .marquee-set > .marquee-sparkle { flex:0 0 30px; text-align:center; }
.home-page .marquee-band--yellow:hover .marquee-content { animation-play-state:paused; }
.home-page .marquee-sparkle { font-size:1.35em; }
@keyframes home-marquee-scroll { to { transform:translateX(-50%); } }
.home-page .work { width:min(calc(100% - clamp(40px,11vw,160px)),1360px); margin:0 auto; padding:64px 0 54px; }
.home-page .home-section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:6px 30px; margin-bottom:22px; }
.home-page .home-section-heading .home-kicker { grid-column:1/-1; }
.home-page .work h1 { margin:0; color:#f7f7f7; font:700 clamp(44px,5.7vw,72px)/.82 var(--font-greycliff); letter-spacing:-.06em; }
.home-page .home-heading-note { max-width:310px; justify-self:end; color:#aaa; font:400 13px/1.5 var(--font-ibm); }
.home-page .projects-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.home-page .projects-grid.second-row { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.home-page .project-media { aspect-ratio:1.75; border-radius:0; background:#171717; }
.home-page .projects-grid.second-row .project-media { aspect-ratio:2.35; }
.home-page .project-info { padding-top:8px; }
.home-page .project-info h3 { font:700 17px var(--font-ibm); }
.home-page .project-info p { color:#fff36d; font:500 12px var(--font-ibm); }
.home-page .home-about { width:min(calc(100% - clamp(40px,11vw,160px)),1360px); margin:0 auto; padding:75px 0 90px; border-top:1px solid #393939; }
.home-page .home-about__grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; padding:25px 0 40px; }
.home-page .home-about h2,.home-page .home-contact h2 { color:#f7f7f7; font:700 clamp(54px,8vw,100px)/.83 var(--font-greycliff); letter-spacing:-.07em; }
.home-page .home-about__grid > div { max-width:460px; }
.home-page .home-about__grid p { margin-bottom:22px; color:#c8c8c8; font:400 14px/1.6 var(--font-ibm); }
.home-page .home-text-link { display:inline-flex; gap:18px; align-items:center; color:#fff36d; font:700 12px var(--font-ibm); }
.home-page .home-text-link:hover { color:#f2ad73; }
.home-page .home-skills { display:flex; flex-wrap:wrap; gap:9px; }
.home-page .home-skills span { padding:6px 14px; border:1px solid #555; border-radius:30px; color:#eee; font:500 11px var(--font-ibm); }
.home-page .home-contact { position:relative; overflow:hidden; padding:70px max(clamp(20px,11vw,160px),calc((100vw - 1360px)/2)) 80px; background:linear-gradient(105deg,#f8ee72 0%,#f2ad73 22%,#dc4760 50%,#9b3b7d 75%,#1489b4 100%); background-size:220% 220%; animation:skills-gradient-flow 10s ease-in-out infinite; color:#090909; }
.home-page .home-contact .home-kicker { color:#090909; }
.home-page .home-contact h2 { margin:24px 0; color:#090909; }
.home-page .home-contact .home-text-link { color:#090909; border-bottom:1px solid currentColor; padding-bottom:7px; }
.home-page .site-footer { margin-top:0; }
@media(max-width:700px) {
  .home-page #hero { min-height:100svh; height:100svh; }
  .home-page #hero > .hero__content { left:24px; width:calc(100% - 48px); transform:translateY(-38%); }
  .home-page #hero h1 { font-size:clamp(70px,18vw,120px); }
  .home-page .work,.home-page .home-about { width:calc(100% - 40px); padding-top:62px; }
  .home-page .home-section-heading { grid-template-columns:1fr; }
  .home-page .home-heading-note { justify-self:start; }
  .home-page .projects-grid,.home-page .projects-grid.second-row { grid-template-columns:1fr; }
  .home-page .projects-grid.second-row .project-media { aspect-ratio:1.75; }
  .home-page .home-about__grid { grid-template-columns:1fr; gap:24px; }
  .home-page .home-contact { padding:60px 20px; }
  .home-page .marquee { height:180px; margin:24px 0 28px; }
  .home-page .marquee-band { height:76px; gap:10px; padding:0 5%; }
  .home-page .marquee-band--yellow { font-size:11px; }
  .home-page .marquee-set { gap:10px; padding-right:10px; }
  .home-page .marquee-set > span:not(.marquee-sparkle) { flex-basis:130px; }
  .home-page .marquee-set > .marquee-sparkle { flex-basis:24px; }
  .home-page .marquee-set span:nth-child(5),.home-page .marquee-set span:nth-child(6),.home-page .marquee-set span:nth-child(9),.home-page .marquee-set span:nth-child(10),.home-page .marquee-set span:nth-child(13) { display:none; }
}
@media(prefers-reduced-motion:reduce) { .home-page .marquee-band--rainbow,.home-page .marquee-content,.home-page .home-contact { animation:none; background-position:50% 50%; } }