/* REEF | Neutral graphite palette, sampled from the user's REEF logo reference:
   RGB (46,46,46) / #2e2e2e. UI backgrounds exclusively use its grayscale tones. */
:root {
  --reef-gray: #2e2e2e;
  --reef-gray-deep: #292929;
  --reef-gray-raised: #363636;
  --reef-gray-light: #3b3b3b;
}
html { background-color: var(--reef-gray); }
body.studio[data-page="home"],
body.studio[data-page="work"],
body.subsite {
  --bg: var(--reef-gray);
  --bg-2: var(--reef-gray-deep);
  --bg-3: var(--reef-gray-raised);
  --editorial: var(--reef-gray-raised);
  --surface: var(--reef-gray-raised);
  background: var(--reef-gray);
}
body.studio[data-page="home"] .hero,
body.studio[data-page="home"] .clients,
body.studio[data-page="work"] :is(.work,.work--index,.work-panel,.work-categories,.work-audio),
body.subsite :is(.hero,.reel,.nf,.nf__main,.sl-hero,.sl-list-wrap),
body.subsite.subsite--grid .reel,
body.subsite.subsite--cinema .reel {
  background-color: var(--reef-gray);
}
body.studio[data-page="home"] .about,
body.studio[data-page="home"] .footer,
body.subsite :is(.foot,.footer) {
  background-color: var(--reef-gray-deep);
}
body.studio[data-page="home"] .menu,
body.studio[data-page="work"] .menu,
body.subsite .menu { background: var(--reef-gray-deep); }
body.studio[data-page="home"] .nav { background: rgba(46,46,46,.23); }
body.studio[data-page="home"] .nav--scrolled,
body.studio[data-page="work"] .nav,
body.subsite :is(.nav,.hdr,.sl-top) { background: rgba(46,46,46,.94); }
body.subsite .footer__wall { background-color: var(--reef-gray-deep); }
body.studio[data-page="work"] .work__item,
body.subsite--grid .reel .work__item { background-color: var(--reef-gray-raised); }

/* Hero photograph now flows through the Selected projects heading and dies away
   beneath the first portfolio frames. No hard bottom boundary. */
body.studio[data-page="home"] .hero {
  --reef-hero-bleed: clamp(230px,23vw,350px);
  position: relative;
  overflow: visible;
  background: var(--reef-gray);
}
body.studio[data-page="home"] .hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(-1 * var(--reef-hero-bleed));
  left: 0;
  background-image: none;
  filter: none;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Photograph and fade use separate layers so photo contrast does not shift
   the final gray swatch. This prevents a visible seam at the fade's end. */
body.studio[data-page="home"] .hero__media::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  background: url("assets/hero-home-v4.jpg") 53% center / cover no-repeat;
  filter: none; /* original photographic grading, no artificial contrast/saturation */
  transform: scale(1.035); /* discreet framing zoom from the native 3200×1800 source */
  transform-origin: center center;
  pointer-events: none;
}
body.studio[data-page="home"] .hero__media::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(32,32,32,.32) 0%,
    rgba(46,46,46,.025) 23%,
    transparent 50%,
    rgba(46,46,46,.10) 63%,
    rgba(46,46,46,.46) 79%,
    rgba(46,46,46,.88) 94%,
    #2e2e2e 100%);
  pointer-events: none;
}
body.studio[data-page="home"] .work { background: transparent; }
@media (max-width: 900px) {
  body.studio[data-page="home"] .hero { --reef-hero-bleed: 270px; }
}
@media (max-width: 600px) {
  body.studio[data-page="home"] .hero { --reef-hero-bleed: 235px; }
  body.studio[data-page="home"] .hero__media::before { background-position: 58% center; }
}
/* Mobile rounded 12px cards, tile spacing, videos and typography are retained. */

/* 22 October: Whole Foods has a visible encoded edge on some viewport widths.
   Bleed and zoom both poster and autoplay preview (including on Work archive).
   The item's existing rounded mask clips all extra pixels safely. */
body.studio .work__item[data-vimeo="554243009"] :is(img, .work__video) {
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: translateY(var(--pz,0px)) scale(1.10);
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Original HERO color, restrained analog-film texture; unlike a raster filter,
   the procedural grain doesn't flatten the original reds. Apply it over the
   complete bleed into Selected projects, and fade the texture out at the bottom. */
body.studio[data-page="home"] .hero::after {
  inset: 0 0 calc(-1 * var(--reef-hero-bleed)) 0;
  opacity: .15;
  background-size: 128px 128px;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 16%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 16%, #000 70%, transparent 100%);
}
/* The last part of the gradient must match the graphite page exactly. */
body.studio[data-page="home"] .hero__media::after {
  background: linear-gradient(180deg,
    rgba(46,46,46,.16) 0%,
    rgba(46,46,46,.02) 22%,
    transparent 51%,
    rgba(46,46,46,.10) 67%,
    rgba(46,46,46,.46) 80%,
    rgba(46,46,46,.90) 95%,
    #2e2e2e 100%);
}