/* Candlelight against neutral charcoal; photographs remain the original files. */
html:has(.portfolio-page),body.portfolio-page{background:#08090b}
.portfolio-page .nav,.portfolio-page .nav.is-scrolled{background:rgba(8,9,11,.96)}
.portfolio-page .nav,.portfolio-page .nav.is-scrolled{height:126px}
.portfolio-page .nav__logo,.portfolio-page .nav.is-scrolled .nav__logo{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(232,116,59,.18))}
.portfolio-page .chapter-index{position:relative;top:auto;background:transparent;backdrop-filter:none;border-bottom:1px solid rgba(244,241,234,.13);margin-bottom:52px}
.portfolio-page .grain{opacity:.025}
/* Screen the entire atmosphere group: black texture pixels can never paint a
   dark rectangle. Each oversized smoke plane feathers before its own edges. */
.work-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:transparent;mix-blend-mode:screen}
.work-atmosphere__smoke{position:absolute;inset:-20% -8% -25% 10%;pointer-events:none;background:none;opacity:1}
.work-atmosphere__smoke::before,.work-atmosphere__smoke::after{content:"";position:absolute;inset:0;background:url('../assets/candle/smoke-swirls.jpg') 50% 64%/cover no-repeat;opacity:.12;-webkit-mask-image:radial-gradient(ellipse at 52% 58%,#000 12%,#0009 42%,transparent 69%);mask-image:radial-gradient(ellipse at 52% 58%,#000 12%,#0009 42%,transparent 69%);animation:work-vapor 20s ease-in-out -7s infinite alternate;will-change:transform}
.work-atmosphere__smoke::after{inset:-10% 28% 0 -36%;opacity:.065;background-position:38% 65%;animation:work-vapor-near 28s ease-in-out -17s infinite alternate}
.work-atmosphere canvas{position:absolute;inset:0;opacity:.9;-webkit-mask-image:linear-gradient(transparent 4%,#000 42%,#000);mask-image:linear-gradient(transparent 4%,#000 42%,#000)}
@keyframes work-vapor{from{transform:translate3d(6%,8%,0) rotate(-7deg) scale(1.02)}to{transform:translate3d(-8%,-10%,0) rotate(3deg) scale(1.09)}}
@keyframes work-vapor-near{from{transform:translate3d(-5%,7%,0) scaleX(-1) rotate(-12deg)}to{transform:translate3d(8%,-9%,0) scaleX(-1) rotate(-2deg)}}
.portfolio-page main,.portfolio-page .footer{position:relative;z-index:1}
.portfolio-page #gallery .portfolio-tile .tile__media{isolation:isolate;background:#08090b}
.portfolio-page #gallery .portfolio-tile .tile__media>picture img{filter:none!important;transition:none!important}
.portfolio-page #gallery .portfolio-tile .scroll-monochrome{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1;transition:opacity .65s cubic-bezier(.2,.7,.2,1)}
.portfolio-page.is-scrolling-photos #gallery .portfolio-tile .scroll-monochrome{opacity:0;transition-duration:.28s}
.portfolio-page #gallery .portfolio-tile .scroll-monochrome picture,.portfolio-page #gallery .portfolio-tile .scroll-monochrome img{display:block;width:100%;height:100%}
.portfolio-page #gallery .portfolio-tile .scroll-monochrome img{filter:grayscale(1) contrast(1.1) brightness(.95)!important}
.portfolio-page #gallery .portfolio-tile:is(:hover,:focus-within) .scroll-monochrome{opacity:0}
.portfolio-page #gallery .portfolio-tile .tile__media::after{display:block;position:absolute;inset:0;z-index:2;content:"";pointer-events:none;background:linear-gradient(135deg,rgba(232,116,59,.075),transparent 45%,rgba(255,180,95,.035));mix-blend-mode:screen;opacity:.45;transition:opacity .8s ease}
.portfolio-page #gallery .portfolio-tile:is(:hover,:focus-within) .tile__media::after{opacity:0}
.portfolio-page .scroll-thread{height:3px;box-shadow:0 0 12px #e8743b,0 0 26px #e8743b77;background:linear-gradient(90deg,#9a4529,#f5bc79)}
@media(max-width:900px),(max-aspect-ratio:3/4){.portfolio-page .nav,.portfolio-page .nav.is-scrolled{height:92px}.portfolio-page .nav__logo,.portfolio-page .nav.is-scrolled .nav__logo{width:148px;height:66px}.portfolio-page .chapter-index{top:auto}}
/* Honor the system on first paint, then the user's explicit preference. */
@media(prefers-reduced-motion:reduce){.work-atmosphere__smoke::before,.work-atmosphere__smoke::after{animation-play-state:paused}.work-atmosphere canvas{display:none}}
.motion-enabled .work-atmosphere__smoke::before,.motion-enabled .work-atmosphere__smoke::after{animation-play-state:running}
.motion-enabled .work-atmosphere canvas{display:block}
.reduce-motion .work-atmosphere__smoke::before,.reduce-motion .work-atmosphere__smoke::after{animation:none!important;will-change:auto}
.reduce-motion .work-atmosphere canvas{display:none}
.work-atmosphere.is-suspended .work-atmosphere__smoke::before,.work-atmosphere.is-suspended .work-atmosphere__smoke::after{animation-play-state:paused}
@media(max-width:900px){.work-atmosphere__smoke{inset:-15% -45% -20% -15%}.work-atmosphere__smoke::before{opacity:.10}.work-atmosphere__smoke::after{opacity:.05}}