button.portfolio-toggle, .project-cover, #project-mosaic button {background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.portfolio-toggle{margin-left:auto;margin-right:26px;align-self:center;font-family:Walla!important}
#videos-toggle{margin-left:0}
.container-nav-adrien .ms-auto{margin-left:0!important}
.project-cover{display:block}.project-cover:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:5px}
#project-mosaic[hidden]{display:none!important}
#project-mosaic{position:fixed;inset:0;z-index:20;background:var(--color-background-color);color:var(--color-font);overflow:auto;padding:14px 15px 40px}
.mosaic-toolbar{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:44px}.mosaic-filters{display:flex;gap:26px;flex-wrap:wrap}
#project-mosaic button{font-family:Walla;font-size:.9rem}.mosaic-filters button[aria-pressed=false]{opacity:.45}
#mosaic-grid{--mosaic-media-height:260px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px}
.mosaic-project{min-width:0;width:min(100%,calc(var(--mosaic-media-height) * var(--cover-ratio,1)));justify-self:start;align-self:start}.mosaic-project img,.mosaic-project .video-cover{width:100%;height:var(--mosaic-media-height);object-fit:contain;object-position:left bottom;display:block}
.mosaic-project span{display:block;margin-top:12px;text-transform:uppercase;font-size:.8rem;line-height:1.35;text-align:left}
.video-cover{display:flex;align-items:center;justify-content:center;min-width:110px;height:130px;background:rgba(127,127,127,.08)}
.portfolio-video{position:relative;z-index:11;object-fit:contain;max-width:calc(100% - 70px)}
.empty-project{text-align:center;padding-top:40vh}.container-nav-information.inactive-0{pointer-events:none}.container-nav-information.active{pointer-events:auto}
@media(max-width:1000px){#mosaic-grid{--mosaic-media-height:220px;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){#mosaic-grid{--mosaic-media-height:190px;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}.mosaic-filters{gap:12px}.mosaic-toolbar{margin-bottom:28px}#project-mosaic button{font-size:.7rem}.portfolio-toggle{margin-right:16px}.mosaic-project span{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.commercial, .documentary { cursor: pointer; }

/* Soft focus reveal when Projects opens; layout and navigation stay still. */
@keyframes mosaic-gallery-in {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}
#project-mosaic:not([hidden]) #mosaic-grid {
    animation: mosaic-gallery-in 1100ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes mosaic-cover-focus {
    from { opacity: .9; filter: blur(1.5px) saturate(.9); }
    to { opacity: 1; filter: blur(0) saturate(1); }
}
@media (hover: hover) and (pointer: fine) {
    .mosaic-project:hover img, .mosaic-project:hover .video-cover {
        animation: mosaic-cover-focus 650ms ease-out both;
    }
}
.mosaic-project:focus-visible img, .mosaic-project:focus-visible .video-cover {
    animation: mosaic-cover-focus 650ms ease-out both;
}

.mosaic-filters[hidden], #mosaic-title[hidden], #mosaic-home[hidden]{display:none!important}
#mosaic-title{font-family:Walla;font-size:.9rem}
.mosaic-video span::after{content:"PLAY";float:right;margin-left:16px;font-size:.65rem;opacity:.5}
@media(max-width:650px){#mosaic-title{font-size:.7rem}.container-nav-adrien>.p-2{padding-left:5px!important;padding-right:5px!important}.portfolio-toggle{margin-right:12px}.mosaic-video span::after{font-size:.55rem;margin-left:8px}}

/* Leave generous space around films for returning to their gallery. */
.portfolio-video{width:auto;height:auto;max-width:min(72vw,1100px);max-height:65vh}
.video-gallery-carousel .slick-arrow{top:var(--video-nav-top,20vh);height:var(--video-nav-height,60vh);background:none;border:0;padding:0;color:transparent}
.video-gallery-carousel .slick-prev{left:0;width:var(--video-nav-left,14vw);cursor:w-resize}
.video-gallery-carousel .slick-next{right:0;width:var(--video-nav-right,14vw);cursor:e-resize}
.video-gallery-carousel .container-carousel-img{cursor:pointer}
.video-gallery-carousel video{cursor:auto}
@media(max-width:650px){.portfolio-video{max-width:76vw;max-height:60vh}}

.mosaic-row-start{grid-column:1}

/* A compact typographic acknowledgement card below the contact details. */
.special-thanks{color:var(--color-font,#000);position:relative;width:min(350px,100%);min-height:190px;margin:32px 0 24px;border:1px solid currentColor;padding:18px 18px 36px;display:flex;flex-direction:column;gap:24px}
.special-thanks .thanks-label{font-size:.7rem;letter-spacing:.035em}
.thanks-slot{display:flex;align-items:center;flex:1;min-height:72px;overflow-wrap:anywhere}
.special-thanks .thanks-slot span{font-size:clamp(1rem,1.7vw,1.5rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.025em;color:inherit;text-decoration:none}
.thanks-roster{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;list-style:none}
.thanks-static .thanks-slot{display:none}
.thanks-static .thanks-roster{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;display:grid;gap:7px}
.special-thanks.thanks-static .thanks-roster li,.special-thanks.thanks-static .thanks-roster span{font-size:.8rem;color:inherit}
@media(max-width:650px){.special-thanks{padding:14px 12px 32px;min-height:160px;gap:18px}.special-thanks .thanks-label{font-size:.6rem}.special-thanks .thanks-slot span{font-size:1rem}}

.special-thanks .thanks-type-walla{font-family:Walla,sans-serif}
.special-thanks .thanks-type-sans{font-family:inherit}

#mosaic-home{margin-right:auto;font-family:Walla;font-size:.9rem;color:inherit;text-decoration:none;white-space:nowrap}
#mosaic-home:focus-visible{outline:1px solid currentColor;outline-offset:5px}
@media(max-width:650px){#mosaic-home{font-size:.7rem}}

#project-navigation[hidden]{display:none!important}
#project-navigation{position:fixed;left:15px;right:15px;top:64px;z-index:11;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;color:var(--color-font,#000)}
#project-navigation button{pointer-events:auto;background:none;border:0;padding:0 0 8px;font:inherit;font-family:Walla,sans-serif;color:inherit;cursor:pointer;line-height:1.2;text-transform:uppercase;touch-action:manipulation}
#project-navigation button:disabled{cursor:default}
.project-transition{pointer-events:none;opacity:0}
@media(max-width:650px){#project-navigation{top:54px;left:10px;right:10px}#project-navigation button{font-size:.65rem;max-width:34vw}}

/* Keep the project strips aligned with a single shared title size. */
.container-slider{--strip-image-height:130px}
.container-slider .c-project,.container-slider .d-project{flex:0 0 auto;width:calc(var(--strip-image-height) * var(--strip-cover-ratio,.8))}
.container-slider .project-informations{height:calc(var(--strip-title-size,.8rem) * 1.3);margin-bottom:10px}
.container-slider .title-slider{font-size:var(--strip-title-size,.8rem);line-height:1.3;letter-spacing:-.025em;white-space:nowrap}
.container-slider .project-cover,.container-slider .img-slider-v{width:100%}
.container-slider .img-slider-v{height:var(--strip-image-height);object-fit:contain;object-position:left bottom}
@media(min-width:768px){.container-slider{--strip-image-height:200px}}

/* The four header controls use the same typography at every mobile width. */
.container-nav-adrien{--navigation-font-size:.8rem}
.container-nav-adrien .nav-title,.container-nav-adrien button.portfolio-toggle{color:var(--color-font,#000);font-family:Walla;font-size:var(--navigation-font-size);line-height:1.2;font-weight:400;letter-spacing:normal}
@media(min-width:768px){.container-nav-adrien{--navigation-font-size:1.1rem}}
.container-nav-information a[href^="mailto:"]{display:inline-block;transform-origin:left center}

/* Keep preview sizes compact by adding columns as the gallery gets wider. */
#project-mosaic[aria-label="All projects"] .mosaic-toolbar{margin-bottom:28px}
#project-mosaic[aria-label="All projects"] #mosaic-grid{--mosaic-media-height:calc((100vw - 90px) / 3.2);grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
@media(min-width:1280px){#project-mosaic[aria-label="All projects"] #mosaic-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
#project-mosaic[aria-label="All projects"] .mosaic-project span{margin-top:6px}
@media(max-width:1000px){#project-mosaic[aria-label="All projects"] #mosaic-grid{--mosaic-media-height:calc((100vw - 70px) / 2.4);grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){#project-mosaic[aria-label="All projects"] #mosaic-grid{--mosaic-media-height:calc((100vw - 46px) / 1.6);grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}#project-mosaic[aria-label="All projects"] .mosaic-toolbar{margin-bottom:22px}}

/* Uniform portrait previews; project carousels retain their original media sizes. */
#project-mosaic[aria-label="All projects"] .mosaic-project{width:100%}
#project-mosaic[aria-label="All projects"] .mosaic-project img{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center}

/* Softer preview colours, full colour on hover; keep the soft-focus movement. */
.mosaic-project img{opacity:.9;filter:saturate(.9);transition:opacity 350ms ease,filter 350ms ease}
.mosaic-project:focus-visible img{opacity:1;filter:saturate(1)}
@media(hover:hover) and (pointer:fine){.mosaic-project:hover img{opacity:1;filter:saturate(1)}}

/* Documentary previews share one landscape 5:4 frame. */
#project-mosaic[aria-label="All projects"][data-filter="documentary"] .mosaic-project img{aspect-ratio:5/4;height:auto;object-fit:cover}

/* Give Documentary larger previews at every responsive column count. */
#project-mosaic[aria-label="All projects"][data-filter="documentary"] #mosaic-grid{grid-template-columns:repeat(var(--documentary-columns,3),minmax(0,1fr))}

/* A restrained double heartbeat on the main navigation and project controls. */
#as,#information,#mosaic-home{display:inline-block}
@keyframes navigation-heartbeat{
  0%,24%,50%,100%{transform:scale(1)}
  8%,32%{transform:scale(.997)}
  17%,41%{transform:scale(1.018)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(#as,#information,#mosaic-toggle,#videos-toggle,#mosaic-home,#project-navigation button:not(:disabled),.mosaic-filters button,#mosaic-close):hover{
    animation:navigation-heartbeat 1800ms ease-in-out infinite;
    transform-origin:center;
  }
}