/* Project Gallery 3.2: uncropped cover, ambient letterboxing, project-name strip.
 * Page-local overrides only. Loaded AFTER V2 and V3 CSS. No animation/DB/media changes.
 */
.pf-shell .pf-hero {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  background: #0b0c0d;
  isolation: isolate;
}
.pf-shell .pf-hero__media {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(340px, calc(100svh - 185px), 920px) !important;
  overflow: hidden;
  background: #121416;
}
/* Gently reuse the same picture behind the uncut foreground image.
   The background is only atmospheric; the actual image is never cropped. */
.pf-shell .pf-hero__media::before {
  content: "";
  position: absolute;
  inset: -36px;
  background-image: var(--pf-cover-ambient, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(38px) brightness(.30) saturate(.75);
  opacity: .63;
  pointer-events: none;
}
.pf-shell .pf-hero__media > img,
.pf-shell .pf-hero__media > video {
  position: relative;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}
.pf-shell .pf-hero__blank { position: relative !important; inset: auto !important; width: 100%; height: 100%; }
/* Project name is BELOW the image, never overlaid on media. */
.pf-shell .pf-cover-titlebar {
  border-bottom: 1px solid var(--pf-line);
  background: #0b0c0d;
  padding: clamp(26px, 3vw, 48px) clamp(24px, 6.5vw, 125px);
}
.pf-shell .pf-cover-titlebar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.pf-shell .pf-cover-titlebar h1 {
  margin: 0 !important;
  font-size: clamp(32px, 4.6vw, 78px) !important;
  line-height: 1.09 !important;
  font-weight: 720 !important;
  letter-spacing: -.045em !important;
  word-spacing: .095em !important;
  color: #f4f1eb !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.pf-shell .pf-cover-titlebar__explore {
  flex-shrink: 0;
  color: var(--pf-accent, #d1b18a) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  transition: color .3s ease, transform .3s ease;
}
.pf-shell .pf-cover-titlebar__explore:hover {color: #fff !important; transform: translateY(3px);}
.pf-shell .pf-cover-titlebar__explore span {font-size: 20px; font-weight: 300;}
/* Original project title is moved to the strip; do not leave an oversized duplicate. */
.pf-shell .pf-intro {
  padding-top: clamp(48px, 5vw, 88px) !important;
  padding-bottom: clamp(65px, 8vw, 128px) !important;
}
.pf-shell .pf-intro__identity > span { display: block; margin-bottom: clamp(22px, 3vw, 42px); }
.pf-shell .pf-intro__meta { column-gap: clamp(48px, 6vw, 110px); }
/* Smaller screens: use more of the view height but preserve every image edge. */
@media (max-width: 800px) {
  .pf-shell .pf-hero__media {height: clamp(320px, calc(100svh - 160px), 750px) !important;}
  .pf-shell .pf-cover-titlebar {padding: 26px 28px 31px;}
  .pf-shell .pf-cover-titlebar h1 {font-size: clamp(34px, 7.3vw, 64px) !important;}
}
@media (max-width: 560px) {
  .pf-shell .pf-hero__media {height: clamp(310px, calc(100svh - 185px), 610px) !important;}
  .pf-shell .pf-hero__media::before {filter: blur(23px) brightness(.28); opacity: .5;}
  .pf-shell .pf-cover-titlebar {padding: 25px 23px 28px;}
  .pf-shell .pf-cover-titlebar__inner {align-items: flex-start; flex-direction: column; gap: 14px;}
  .pf-shell .pf-cover-titlebar h1 {font-size: clamp(32px, 8vw, 49px) !important;}
  .pf-shell .pf-cover-titlebar__explore {font-size: 9px; letter-spacing: .13em;}
  .pf-shell .pf-intro {padding-top: 54px !important;}
}
@media (prefers-reduced-motion: reduce) {
  .pf-shell .pf-cover-titlebar__explore {transition: none !important;}
}