/* Final refinement pass */

/* Readable responsive type: keep primary reading text at an effective 16px. */
html { font-size: 100% !important; }
body {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  text-rendering: optimizeLegibility;
}

p, li, .project-summary, .about-section__body, .person-content {
  font-size: 1rem !important;
}

.project-meta-line,
.project-card__meta,
.learn-more-card__title,
.back-link,
.project-kicker,
.about-section__title,
.project-filter__menu button {
  font-size: 0.8125rem !important;
}

/* One continuous navigation group with a consistent active underline. */
.site-nav {
  min-height: 72px !important;
  padding: 0 32px !important;
  justify-content: flex-start !important;
}
.site-nav__links {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}
.site-nav__links .site-nav__link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 72px !important;
  margin: 0 !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.site-nav__link.is-active { font-style: normal !important; }
.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17px;
  height: 1px;
  background: currentColor;
}
.linkedin-link {
  margin-left: auto !important;
  min-height: 72px !important;
}

/* New supplied homepage cover, shown at its natural proportions and moved upward. */
.hero {
  top: 72px !important;
  height: calc(100svh - 72px) !important;
  min-height: 540px !important;
  pointer-events: auto !important;
}
.hero__lockup {
  width: min(96vw, 1240px) !important;
  margin: 0 auto !important;
  transform: translateY(-5vh) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}
.hero__lockup-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Wider, more open brand-blue scroll chevron. */
.hero-scroll-indicator {
  width: 76px !important;
  height: 42px !important;
  bottom: 28px !important;
  color: #023fa1 !important;
  font-size: 0 !important;
  pointer-events: auto !important;
  animation: refinedChevronBounce 1.7s ease-in-out infinite !important;
}
.hero-scroll-indicator::before,
.hero-scroll-indicator::after {
  content: "";
  position: absolute;
  top: 16px;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.hero-scroll-indicator::before {
  left: 5px;
  transform: rotate(20deg);
  transform-origin: right center;
}
.hero-scroll-indicator::after {
  right: 5px;
  transform: rotate(-20deg);
  transform-origin: left center;
}
@keyframes refinedChevronBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .72; }
  50% { transform: translateX(-50%) translateY(7px); opacity: 1; }
}

/* Clean category dropdown chevron. */
.project-filter__toggle { font-size: 0.8125rem !important; }
.project-filter__arrow {
  position: relative !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: .78 !important;
  transform: none !important;
}
.project-filter__arrow::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--brown, #3d332c);
  border-bottom: 1.5px solid var(--brown, #3d332c);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 180ms ease, top 180ms ease;
}
.project-filter__toggle[aria-expanded="true"] .project-filter__arrow::before {
  top: 3px;
  transform: rotate(225deg);
}

/* Natural-artboard three-column galleries. No square frames or cropping. */
.project-static-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 8px !important;
  grid-auto-flow: row dense !important;
  column-gap: clamp(18px, 2vw, 30px) !important;
  row-gap: 8px !important;
  align-items: start !important;
  width: min(calc(100% - 64px), 1380px) !important;
  margin: 0 auto clamp(72px, 8vw, 112px) !important;
}
.project-static-gallery__item {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.project-static-gallery__item.is-wide {
  grid-column: span 2 !important;
}
.project-static-gallery__item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 1px solid rgba(61,51,44,.08);
  background: #fff;
  box-shadow: 0 8px 22px rgba(61,51,44,.07);
  filter: none !important;
  image-rendering: auto !important;
}

/* About collage: explicit natural-aspect layout matching the supplied arrangement. */
.person-collage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1142 / 1728 !important;
  columns: auto !important;
  column-gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.person-image,
.person-image:nth-child(n) {
  position: absolute !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.person-image img,
.person-image:nth-child(n) img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 1px solid rgba(61,51,44,.11);
  background: var(--cream, #faf5ed);
  box-shadow: 0 12px 28px rgba(61,51,44,.10);
}
.person-image--family-travel {
  left: 1.5% !important; top: 1.5% !important; width: 46% !important;
  transform: rotate(-.35deg) !important;
}
.person-image--night-out {
  left: 53% !important; top: 1.5% !important; width: 44.5% !important;
  transform: rotate(.35deg) !important;
}
.person-image--friends {
  left: 1.4% !important; top: 27.4% !important; width: 46% !important;
  transform: rotate(-.25deg) !important;
}
.person-image--celebration {
  left: 53.1% !important; top: 22.9% !important; width: 44.5% !important;
  transform: rotate(.4deg) !important;
}
.person-image--graduation {
  left: 1.5% !important; top: 50.1% !important; width: 46% !important;
  transform: rotate(-.25deg) !important;
}

/* Ensure all Learn More cards remain above project interaction layers and navigate. */
.learn-more {
  position: relative !important;
  z-index: 100 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}
.learn-more__inner,
.learn-more__grid,
.learn-more-card,
.learn-more-card__link {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
.learn-more-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Keep project headings comfortably inset without reducing usable reading width. */
.project-intro {
  width: min(calc(100% - 48px), 1220px) !important;
  padding-left: clamp(48px, 6vw, 96px) !important;
  padding-right: clamp(32px, 4vw, 64px) !important;
}
.project-intro .project-title,
.project-intro .project-summary,
.project-intro .project-meta-line,
.project-intro .project-kicker { max-width: 800px !important; }

@media (max-width: 980px) {
  .project-static-gallery { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .project-static-gallery__item.is-wide { grid-column: span 2 !important; }
  .hero__lockup { width: 98vw !important; transform: translateY(-4vh) !important; }
}

@media (max-width: 760px) {
  body { font-size: 1rem !important; }
  .site-nav { min-height: 64px !important; padding: 0 18px !important; }
  .site-nav__links { gap: 18px !important; }
  .site-nav__links .site-nav__link { min-height: 64px !important; font-size: 1rem !important; }
  .site-nav__link.is-active::after { bottom: 13px; }
  .linkedin-link { min-height: 64px !important; }
  .hero { top: 64px !important; height: calc(100svh - 64px) !important; }
  .hero__lockup { width: 100vw !important; transform: translateY(-3.5vh) !important; }
  .project-intro {
    width: min(calc(100% - 32px), 1220px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .person-collage { aspect-ratio: 1142 / 1728 !important; }
}

@media (max-width: 560px) {
  .site-nav { padding: 0 12px !important; }
  .site-nav__links { gap: 11px !important; }
  .site-nav__links .site-nav__link { font-size: .9375rem !important; }
  .linkedin-link { font-size: 1.25rem !important; }
  .project-static-gallery {
    grid-template-columns: 1fr !important;
    width: min(calc(100% - 32px), 620px) !important;
  }
  .project-static-gallery__item.is-wide { grid-column: span 1 !important; }
  .hero-scroll-indicator { width: 66px !important; bottom: 20px !important; }
  .hero-scroll-indicator::before,
  .hero-scroll-indicator::after { width: 29px; }
  .person-collage {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: auto !important;
    gap: 18px !important;
  }
  .person-image,
  .person-image:nth-child(n) {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-indicator { animation: none !important; }
}

/* Match the Home label and project navigation typography to the same readable scale. */
.project-nav {
  min-height: 72px !important;
  padding: 0 32px !important;
}
.project-nav__brand {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 72px !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
.menu-panel__label,
.menu-contact__label,
.menu-work-submenu a,
.menu-contact__email,
.menu-contact__linkedin {
  font-size: 1rem !important;
}

@media (max-width: 760px) {
  .project-nav {
    min-height: 64px !important;
    padding: 0 18px !important;
  }
  .project-nav__brand { min-height: 64px !important; font-size: 1rem !important; }
}