/* One visual language for home previews and their full collections. */
:is(#filmsView,#photosView){position:relative;isolation:isolate;color:#303b37}
#filmsPageGrainient,#photosPageGrainient{position:absolute;inset:0;z-index:0;overflow:hidden}
:is(#filmsPageGrainient,#photosPageGrainient) .grainient-container{position:absolute;inset:0;width:100%;height:100%}
:is(#filmsPageGrainient,#photosPageGrainient) .grainient-reading-shade{background:transparent}
#filmsView>#filmsPageGrainient~*,#photosView>#photosPageGrainient~*{position:relative;z-index:1}
#filmsView>#filmsPageGrainient,#photosView>#photosPageGrainient{position:absolute;z-index:0}
:is(#filmsView,#photosView)>.grainient-pause{position:absolute!important;right:12px;top:9px;z-index:5;color:#303b37;border-color:#303b3750;background:#f5f2e980}
:is(#filmsView,#photosView) :is(.page-intro,.lead-reels,.filmmaking-feature,.livestream-feature,.gallery-directory,.collection-end){background:transparent!important}
:is(#filmsView,#photosView) :is(h1,h2,h3,p,em,.text-link,.gallery-link){color:inherit}
:is(#filmsPageGrainient,#photosPageGrainient)::after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(0deg,var(--paper,#f0ebe0),transparent)}
/* A quiet aperture opening: no black overlays, pinning, or extra scroll hold. */
#work.film-reveal-ready #watchCard{clip-path:inset(calc(var(--film-open,0) * 13%) 0);transform:translateY(calc(var(--film-open,0) * 32px)) scale(calc(1 - var(--film-open,0) * .035));transform-origin:center;will-change:clip-path,transform}
#work.film-reveal-ready .section-heading{opacity:calc(1 - var(--film-open,0) * .55);transform:translateY(calc(var(--film-open,0) * 16px))}
@keyframes collection-aperture{from{clip-path:inset(12% 0);transform:translateY(22px) scale(.975);opacity:.65}to{clip-path:inset(0);transform:translateY(0) scale(1);opacity:1}}
@keyframes collection-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
#filmsView.collection-entering .opening-portrait{animation:collection-aperture .95s cubic-bezier(.2,.7,.2,1) both}
#filmsView.collection-entering .opening-portrait:last-child{animation-delay:.1s}
#filmsView.collection-entering .film-intro-copy,#photosView.collection-entering>.page-intro{animation:collection-copy-in .75s ease both}
#photosView.collection-entering>.full-gallery{animation:collection-aperture .9s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){#work.film-reveal-ready #watchCard,#work.film-reveal-ready .section-heading{clip-path:none;transform:none;opacity:1;will-change:auto}.collection-entering *{animation:none!important}}

/* Beige paper and the same fine grain, from Andrew's introduction through contact. */
:is(#aboutView,#contact){position:relative;isolation:isolate;background:#eee6d7!important;color:#303b37}
#aboutPageGrainient,#contactGrainient{position:absolute!important;inset:0;z-index:0;overflow:hidden;width:100%;height:100%;max-width:none}
:is(#aboutPageGrainient,#contactGrainient) .grainient-container{position:absolute;inset:0;width:100%;height:100%}
:is(#aboutPageGrainient,#contactGrainient) .grainient-reading-shade{background:transparent}
#aboutView>:not(#aboutPageGrainient),#contact>:not(#contactGrainient){position:relative;z-index:1}
#aboutView>:is(.about-opening,.about-music,.about-process){background:transparent!important}
:is(#aboutView,#contact)>.grainient-pause{position:absolute;top:9px;right:12px;z-index:5;color:#303b37;border-color:#303b3750;background:#f5f2e980}
.andrew-gradient-wrap.grainient-andrew,.andrew-gradient-wrap>#andrewGrainient{background:#eee6d7!important}
#andrewGrainient{--seam-in:#eee6d7;--seam-out:#eee6d7}
#andrewGrainient .grainient-reading-shade{background:transparent}
#contactGrainient::before{content:"";position:absolute;inset:0 0 auto;height:100px;background:linear-gradient(#eee6d7,transparent);z-index:2;pointer-events:none}
body:has(#aboutView:not([hidden])),body:has(#aboutView:not([hidden])) header{background:#eee6d7}
/* Viewport-sized drawing surfaces keep grain fine, even on long collection pages. */
:is(#filmsPageGrainient,#photosPageGrainient,#aboutPageGrainient) .grainient-container{position:sticky;top:0;height:100vh;max-height:100%;width:100%}
#homeView .possibilities.grainient-stories{position:relative;isolation:isolate;background:#e0dfcc!important}
#storiesGrainient{position:absolute;inset:0;z-index:0;overflow:hidden}
#storiesGrainient .grainient-container{position:absolute;inset:0;width:100%;height:100%}
#storiesGrainient .grainient-reading-shade{background:transparent}
#homeView .possibilities.grainient-stories>:not(#storiesGrainient){position:relative;z-index:1}
#homeView .possibilities.grainient-stories>.grainient-pause{position:absolute;top:9px;right:12px;z-index:5;color:#303b37;border-color:#303b3750;background:#f5f2e980}
#storiesGrainient::before,#storiesGrainient::after{content:"";position:absolute;left:0;right:0;height:120px;z-index:2;pointer-events:none}
#storiesGrainient::before{top:0;background:linear-gradient(#d8dfd0,transparent)}
#storiesGrainient::after{bottom:0;background:linear-gradient(0deg,#eee6d7,transparent)}
/* Full-bleed beige paper continues through the footer, without a separate strip. */
body>footer.grainient-footer{position:relative;isolation:isolate;margin:0!important;padding:35px 7%!important;max-width:none;border:0!important;background:#eee6d7}
#footerGrainient{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
#footerGrainient .grainient-container{position:absolute;inset:0;width:100%;height:100%}
#footerGrainient .grainient-reading-shade{background:transparent}
body>footer.grainient-footer>:not(#footerGrainient){position:relative;z-index:1}
#footerGrainient::before,#contactGrainient::after{content:none}
/* A single unbroken drawing surface beneath contact + footer: no canvas seam. */
body.grainient-paper{isolation:isolate}
#continuousPaperGrainient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#eee6d7}
#continuousPaperGrainient .grainient-container{position:absolute;inset:0;width:100%;height:100%}
#continuousPaperGrainient .grainient-reading-shade{display:none}
body.grainient-paper #contact{background:transparent!important}
body.grainient-paper>footer{position:relative;isolation:isolate;margin:0!important;padding:35px 7%!important;max-width:none;border:0!important;background:transparent!important;box-shadow:none!important}
body.grainient-paper>footer::before,body.grainient-paper>footer::after{content:none!important}
/* Andrew's home introduction shares the same paper as contact and the footer. */
body.grainient-paper .andrew-gradient-wrap,body.grainient-paper .andrew-gradient-wrap>.personal-intro{background:transparent!important}
body.grainient-paper .andrew-gradient-wrap .personal-intro>div :is(h2,p,a,em){color:#303b37!important}
body.grainient-paper #homeView .possibilities.grainient-stories{background:transparent!important}
#storiesGrainient{mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 140px),transparent 100%)}
#storiesGrainient::after{content:none}
/* Collection views, header, and footer all reveal one route-colored grain field. */
body.grainient-paper :is(#filmsView,#photosView,#aboutView){background:transparent!important}
body.grainient-paper:has(:is(#filmsView,#photosView,#aboutView):not([hidden])) header{background:transparent!important}
body.grainient-paper #aboutView>:is(.about-opening,.about-music,.about-process){background:transparent!important}
body.grainient-paper :is(#filmsView,#photosView) .collection-end{border-top:0!important}

/* The story bridge is full bleed, not a max-width rectangle on the paper.
   Both ends dissolve into the shared field instead of clipping a live canvas. */
#homeView .possibilities.grainient-stories{max-width:none;width:100%;margin-inline:0}
#homeView .possibilities.grainient-stories>:is(.section-heading,.services){max-width:1260px;margin-left:auto;margin-right:auto}
#storiesGrainient{
  background:linear-gradient(180deg,#f5d8b9 0%,#edbf95 48%,#eee6d7 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);
}
#storiesGrainient .grainient-container{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 68%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 68%,transparent);
}
#storiesGrainient::before,#storiesGrainient::after{content:none}

/* Feather the entire field (color AND grain), not only its inner canvas.
   Overlap the neighboring fields so no rectangular cutoff remains at the join. */
#homeView .possibilities.grainient-stories{overflow:visible;z-index:0}
#homeView #photography.grainient-photography,#homeView .andrew-gradient-wrap{z-index:1}
#homeView #storiesGrainient{
  top:-180px;bottom:-120px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 58%,transparent 100%);
}
#homeView #storiesGrainient .grainient-container{
  -webkit-mask-image:none;mask-image:none;
}
#homeView #photography.grainient-photography{background:transparent!important}
#homeView #photographyGrainient{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 240px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 240px),transparent 100%);
}
@media(max-width:700px){
  #homeView #storiesGrainient{top:-120px;bottom:-100px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 72%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 72%,transparent 100%);
  }
}
/* The shorter wall now meets the story bridge directly. Dissolve both live
   fields across the join, leaving the shared paper underneath uninterrupted. */
#homeView #photographyGrainient{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 300px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 300px),transparent 100%);
}
#homeView #photographyGrainient::after{content:none}