.brand {
  display: inline-flex;
  align-items: center;
  z-index: 51;
}

.brand-logo {
  display: block;
  width: clamp(145px, 12vw, 205px);
  height: auto;
}

.site-header.scrolled .brand-logo {
  width: clamp(132px, 11vw, 185px);
}

/* Hero images use their natural aspect ratio and are constrained inside the card. */
.visual-core-rotation {
  inset: 11% 6% 13%;
  padding: .7rem;
}

.hero-rotation-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.visual-core {
  display: grid;
  place-items: center;
}

/* Any page using the shared header/site.js gets safe clearance below the fixed header. */
body.inner-page main {
  padding-top: 86px;
}

/* Home is useful in the hamburger menu even though desktop home navigation does not need it. */
body.home-page .site-nav .nav-home {
  display: none;
}

/* Project social graphics are 1280x640 (2:1). Keep the full artwork visible
   at every breakpoint instead of filling a tall container and cropping it. */
.project-art.project-photo {
  min-height: 0;
  aspect-ratio: 2 / 1;
  background: #e9eef4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-featured .project-art.project-photo {
  min-height: 0;
  aspect-ratio: 2 / 1;
  align-self: center;
}

.project-featured .project-image {
  min-height: 0;
}

.project-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 50%, rgba(43,132,206,.22), transparent 22%),
    radial-gradient(circle at 65% 50%, rgba(253,137,30,.16), transparent 22%),
    linear-gradient(135deg, #eaf1f8, #dfe8f2);
}

.placeholder-eyes {
  display: flex;
  gap: clamp(1.2rem, 4vw, 3rem);
  transform: rotate(-3deg);
}

.placeholder-eye {
  width: clamp(90px, 11vw, 150px);
  aspect-ratio: 1.7 / 1;
  border: 7px solid var(--navy);
  border-radius: 55% 45% 55% 45%;
  position: relative;
  background: rgba(253,253,253,.72);
  box-shadow: 0 14px 30px rgba(0,24,93,.08);
}

.placeholder-eye::after {
  content: "";
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  left: 37%;
  top: 30%;
}

/* Full-width social art used inside project detail pages. */
.creepy-social-card {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

@media (max-width: 760px) {
  .brand-logo { width: 145px; }
  .site-header.scrolled .brand-logo { width: 132px; }
  body.inner-page main { padding-top: 72px; }

  /* When the hamburger is open, turn the fixed header itself into the full-screen
     white panel. Keep the logo/toggle pinned to the top instead of allowing the
     header's normal vertical centering to float them into the menu. */
  body.nav-open .site-header,
  body.nav-open .site-header.scrolled {
    height: 100dvh;
    align-items: flex-start;
    padding-top: 14px;
    background: var(--white);
    backdrop-filter: none;
    box-shadow: none;
  }

  body.nav-open .brand,
  body.nav-open .nav-toggle {
    position: relative;
    z-index: 52;
  }

  body.nav-open .site-nav {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: var(--white);
    transform: none;
  }

  body.home-page .site-nav .nav-home {
    display: block;
  }

  .visual-core-rotation {
    inset: 12% 5% 14%;
    padding: .45rem;
    transform: translateY(-4%);
  }
}