/* Home-specific structure; existing shared navigation and hero keep their identity. */
.portfolio-home :is(#selected-work, #more-work) { scroll-margin-top: calc(var(--navh, 72px) + 24px); }
/* Keep the animated collage and introduction in separate layout areas.
   The captured Webflow offsets are viewport-relative and can cross at tablet sizes. */
.portfolio-home .hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas: "visual intro";
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: 100%;
  max-width: 1440px;
  min-height: min(800px, 100svh);
  margin: 0 auto;
  padding: calc(var(--navh, 68px) + 36px) clamp(24px, 5vw, 80px) 48px;
  text-align: left;
}
.portfolio-home .hero-section .intro-container {
  grid-area: intro;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  transform: none !important;
  opacity: 1 !important;
  text-align: left;
}
.portfolio-home .hero-section .first-heading {
  margin-bottom: 14px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.18;
}
.portfolio-home .hero-section .summary-info.intro {
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.8;
}
.portfolio-home .hero-section .link-block-8 { margin-top: 24px; }
.portfolio-home .hero-section .video-grid {
  grid-area: visual;
  width: 100%;
  max-width: 600px;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  transform: none !important;
  opacity: 1 !important;
  /* The spinning collage cannot paint into the adjacent intro or next section. */
  overflow: hidden;
  overflow: clip;
  contain: paint;
}
.portfolio-home .hero-section .scroll-track {
  width: 100%;
  height: 100%;
  transform: none !important;
}
.portfolio-home .hero-section .scroll-div {
  position: relative;
  top: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-content: center;
  align-items: center;
}
.portfolio-home .hero-section .grid-3 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr);
  width: 84%;
  height: 84%;
  gap: clamp(4px, .65vw, 8px);
  transform-origin: center;
}
/* Tablets retain the paired composition; phones get a compact visual-first hero. */
@media (max-width: 900px) {
  .portfolio-home .hero-section {
    min-height: 0;
    gap: 28px;
    padding-top: calc(var(--navh, 68px) + 24px);
    padding-bottom: 40px;
  }
  .portfolio-home .hero-section .first-heading { font-size: 32px; }
  .portfolio-home .hero-section .summary-info.intro { font-size: 15px; }
  /* The captured collage only fills rows 2–8. Collapse its empty outer rows
     symmetrically to keep the artwork square and its rotation centered. */
  .portfolio-home .hero-section .grid-3 {
    grid-template-rows: 0 repeat(7, minmax(0, 1fr)) 0;
    /* Reserve the diagonal footprint too, so a turn never clips tile corners. */
    width: 72%;
    height: 72%;
  }
}
@media (max-width: 699px) {
  .portfolio-home .hero-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "intro";
    justify-items: center;
    min-height: 0;
    gap: 10px;
    padding: calc(var(--navh, 68px) + 12px) 24px 40px;
  }
  .portfolio-home .hero-section .video-grid {
    width: min(100%, 320px, 44svh);
    max-width: 320px;
  }
  .portfolio-home .hero-section .intro-container {
    max-width: 440px;
    text-align: center;
  }
  .portfolio-home .hero-section .first-heading {
    margin-bottom: 12px;
    font-size: clamp(32px, 9vw, 38px);
    text-align: center;
  }
  .portfolio-home .hero-section .summary-info.intro {
    max-width: 34ch;
    margin-inline: auto;
    font-size: 15px;
    line-height: 1.75;
    text-align: center;
  }
  .portfolio-home .hero-section .link-block-8 {
    min-height: 44px;
    margin-top: 22px;
    padding: 10px 18px;
    gap: 9px;
    border-radius: 999px;
    box-shadow: none;
  }
  .portfolio-home .hero-section .buttontext { font-size: 13px; line-height: 1.5; }
  .portfolio-home .hero-section .image-20 { width: 18px; max-width: none; }
}
@media (max-width: 479px) {
  .portfolio-home .hero-section { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-home .hero-section :is(.grid-3, .video-2) { transform: none !important; }
}
.portfolio-home .navbar-2 a[aria-current="location"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* Anchor destinations receive focus for navigation, without a section-wide ring.
   Interactive descendants keep their own focus-visible indicators. */
.portfolio-home :is(#selected-work, #more-work):focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-home .navbar-2 { transition: none; }
}