/* One image per cover, with the logo overlaid inside its lower edge. */
.hero-main{height:calc(100% - 230px)}
.hero-bottom{gap:30px;bottom:8px}
.project-carousel{width:100%;--thumb-h:clamp(118px,10.6vw,196px);--card-gap:10px}
.project-rail{height:auto;display:flex;gap:var(--card-gap);width:100%;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto;overflow-anchor:none;padding:5px 0;touch-action:pan-x pan-y}
.project-rail::-webkit-scrollbar{display:none}
.project-thumb{position:relative;flex:0 0 auto;padding:3px;min-width:0;border:1px solid transparent;border-radius:11px;background:transparent;transition:opacity .25s ease,border-color .25s ease}
.hero.is-active .project-thumb{opacity:0}
.hero.is-active .project-thumb.active{opacity:1;border-color:rgba(255,255,255,.65)}
.project-light .hero.is-active .project-thumb.active{border-color:rgba(13,13,13,.45)}
/* Cards share one height and take three widths (data-size: narrow 3:4, standard 4:3, wide 16:9), like an editorial strip. */
.project-thumb-image{position:relative;--ar:1.3333;height:var(--thumb-h);width:calc(var(--thumb-h)*var(--ar));overflow:hidden;border-radius:7px}
.project-thumb[data-size=wide] .project-thumb-image{--ar:1.7778}
.project-thumb[data-size=narrow] .project-thumb-image{--ar:.75}
/* Every other card plays a muted clip over its still; it fades in once it is actually playing (project-carousel.js). */
.project-thumb-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .45s var(--ease);pointer-events:none}
.project-thumb-clip.is-playing{opacity:1}
.project-thumb:hover .project-thumb-clip{transform:scale(1.025)}
.project-thumb-image>img,.project-thumb-image>picture>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.project-thumb:hover .project-thumb-image>img,.project-thumb:hover .project-thumb-image>picture>img{transform:scale(1.025)}
.project-brand{position:absolute;inset:auto 0 0;isolation:isolate;height:52%;min-height:46px;display:flex;align-items:flex-end;justify-content:center;padding:0 10px 9px;color:#0d0d0d;pointer-events:none}
.project-brand:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.42) 55%,rgba(255,255,255,.84));backdrop-filter:blur(10px) saturate(1.35);-webkit-backdrop-filter:blur(10px) saturate(1.35);mask-image:linear-gradient(transparent,#000 72%)}
.project-brand>img{display:block;flex:none;width:var(--logo-width,84px);height:var(--logo-height,20px);max-width:calc(100% - 12px);object-fit:contain;border-radius:0;filter:brightness(0)}
/* Optical sizes, not equal bounding boxes: stacked and serif marks need different space. */
.project-brand[data-brand="flick"]{--logo-width:84px;--logo-height:20px}
.project-brand[data-brand="miggy"]{--logo-width:78px;--logo-height:19px}
.project-brand[data-brand="erha"]{--logo-width:61px;--logo-height:26px}
.project-brand[data-brand="liquid-aroma"]{--logo-width:57px;--logo-height:26px}
.project-brand[data-brand="nailboo"]{--logo-width:87px;--logo-height:21px}
.project-brand[data-brand="pomelo"]{--logo-width:86px;--logo-height:26px}
.project-brand[data-brand="signal"]{--logo-width:81px;--logo-height:27px}
.project-brand[data-brand="keychron"]{--logo-width:88px;--logo-height:18px}
.project-brand[data-brand="land-rover"]{--logo-width:54px;--logo-height:28px}
.project-brand[data-brand="ontario-airport"]{--logo-width:90px;--logo-height:29px}
.project-brand[data-brand="bird-and-bird"]{--logo-width:96px;--logo-height:18px}
.project-brand[data-brand="rabbit"]{--logo-width:83px;--logo-height:21px}
.project-brand[data-brand="steelcase"]{--logo-width:90px;--logo-height:18px}
.project-brand-text{position:static;opacity:1;text-shadow:none;color:#0d0d0d;font:15px/1 var(--sans);letter-spacing:-.025em;text-align:center}
.project-brand[data-brand="studies"] .project-brand-text{font-size:14px}
.project-thumb:focus-visible{opacity:1!important;outline-offset:-2px;outline:2px solid #e300c7}
@media(min-width:1700px){.project-carousel{--card-gap:14px}}
@media(max-width:1100px){.project-carousel{--thumb-h:128px}}
@media(max-width:760px){.project-carousel{--thumb-h:124px;--card-gap:8px}.hero-bottom{gap:26px}.hero-main{height:calc(100% - 210px)}.hero.is-active .project-thumb{opacity:1}.project-brand{padding:0 8px 9px}.project-brand-text{font-size:14px}}
@media(max-width:520px){.project-carousel{--thumb-h:116px}.hero-bottom{left:10px;right:10px}.hero-main{height:calc(100% - 220px)}}
@media(prefers-reduced-motion:reduce){.project-thumb-clip{display:none}.project-thumb,.project-thumb-image>img,.project-thumb-image>picture>img,.project-brand:before{transition:none}.project-thumb:hover .project-thumb-image>img,.project-thumb:hover .project-thumb-image>picture>img{transform:none}}