/* Maintain the landscape reference ratio in desktop, phone, and side-gallery project views. */
.work-reset .project-wrap>.projects_homepage{
  height:auto!important;min-height:0!important;aspect-ratio:3/2!important
}
/* Give the standalone Work page the same full-image card treatment at desktop widths. */
@media(min-width:768px){
  .work-reset .project-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap,20px)}
  .work-reset .project-wrap>.projects_homepage{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:3/2!important;margin:0!important;overflow:hidden}
  .work-reset .project-wrap>.projects_homepage.collection-item.project_4.project_croyds.reveal-on-scroll{height:auto!important;aspect-ratio:3/2!important}
}
@media(min-width:1100px){.work-reset .project-wrap{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:768px){
  .work-reset .project-wrap>.projects_homepage.project_audi{background:url('/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a999226a04617ef476c1717_DSC08647.jpg') 50%/cover}
  .work-reset .project-wrap>.projects_homepage.project_8{background:url('/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aaabf09f1d827a4e3633fd9_DSC05287.jpg') 50% 0/cover}
  .work-reset .project-wrap>.projects_homepage.project_2{background:url('/assets/projects/fiorellino/fiorellino-card.jpg') 50%/cover}
  .work-reset .project-wrap>.projects_homepage.project_3{background:url('/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a9e37f6fc84bdabd1d19ce9_mare_carousel_26_28.jpg') 50% 85%/cover}
  .work-reset .project-wrap>.projects_homepage.project_10{background:url('/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6aaa2112cb3de6427e2f161f_DSC03411.jpg') 50%/cover}
  .work-reset .project-wrap>.projects_homepage.project_6{background:url('/assets/cdn.prod.website-files.com/6a98e96a08306b0828600f22/6a99970ae2cd9c9adf6109ef_Screenshot%202026-09-03%20at%2011.48.51%E2%80%AFAM.png') 50% 35%/cover}
  .work-reset .project-wrap>.projects_homepage::after{content:"";position:absolute;inset:45% 0 0;z-index:2;background:linear-gradient(transparent,rgba(0,0,0,.68));pointer-events:none}
  .work-reset .project-wrap>.projects_homepage .project-info{position:absolute!important;left:0;right:0;bottom:0;top:auto!important;z-index:3}
  .work-reset .project-wrap>.projects_homepage .card-link{position:absolute;inset:0;z-index:4}
}
@media(min-width:768px){
  .work-reset .project-wrap>.projects_homepage .project-info .soft-text{color:#e4e4e4!important}
  .work-reset .project-wrap>.projects_homepage .masque_vid{position:absolute;inset:0;width:100%;height:100%!important}
}

/* Compact poster-like overview: every project stays visible in the desktop mockup without scrolling. */
@media(min-width:768px){
  html.in-frame,
  html.in-frame body{height:auto!important;max-height:none!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
  html.in-frame .page-wrapper{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  html.in-frame .navbar{position:fixed!important;top:0;left:0;right:0;height:0!important;min-height:0!important}
  html.in-frame .nav-frost,
  html.in-frame .work-head,
  html.in-frame .home-footer{display:none!important}
  html.in-frame .work-reset{
    display:flex!important;flex-direction:column;box-sizing:border-box;
    width:100%;height:auto!important;min-height:100dvh!important;
    padding:clamp(106px,12vh,132px) calc(clamp(18px,1.76vw,36px) + 4px) 32px clamp(18px,1.76vw,36px)!important;
    overflow:visible!important
  }
  html.in-frame .work-reset .project-wrap{
    display:grid!important;flex:0 0 auto;min-height:0;width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:auto;align-content:start;
    gap:clamp(8px,.75vw,15px);overflow:visible
  }
  html.in-frame .work-reset .project-wrap>.projects_homepage{
    grid-column:span 1;width:100%!important;height:auto!important;min-height:0!important;
    aspect-ratio:3/2!important;margin:0!important;border-radius:4px
  }
  html.in-frame .work-reset .project-wrap>.projects_homepage::after{
    inset:0!important;background:rgba(0,0,0,.28)!important;opacity:0;
    transition:opacity .28s ease
  }
  html.in-frame .work-reset .project-wrap>.projects_homepage:hover::after,
  html.in-frame .work-reset .project-wrap>.projects_homepage:focus-within::after{opacity:1}
  html.in-frame .work-reset .project-wrap>.projects_homepage .project-info{
    display:flex!important;align-items:center;justify-content:center;text-align:center;
    padding:18px!important;opacity:0!important;transition:opacity .28s ease;pointer-events:none
  }
  html.in-frame .work-reset .project-wrap>.projects_homepage:hover .project-info,
  html.in-frame .work-reset .project-wrap>.projects_homepage:focus-within .project-info{opacity:1!important}
  html.in-frame .work-reset .project-wrap>.projects_homepage .project-info .sub_head,
  html.in-frame .work-reset .project-wrap>.projects_homepage .project-info .linear_gradient{display:none!important}
  html.in-frame .work-reset .project-wrap>.projects_homepage .project-info .body-text-3{
    color:#e6e6e6!important;text-transform:uppercase;letter-spacing:.04em
  }
}
@media(min-width:768px) and (max-height:620px){
  html.in-frame .work-reset{padding-top:82px!important;padding-bottom:18px!important}
}

/* Let the desktop mockup's textured colour show behind the expanded Work grid. */
@media(min-width:768px){
  html.in-frame,
  html.in-frame body,
  html.in-frame .page-wrapper,
  html.in-frame .work-reset,
  html.in-frame .work-head,
  html.in-frame .work-reset .project-wrap{background:transparent!important}
}

/* In the expanded desktop scene, the parent owns the logo and menu chrome. */
html.in-frame .navbar .nav-brand,
html.in-frame .navbar .menu-button{visibility:hidden!important;pointer-events:none!important}
html.in-frame .work-reset .project-wrap>.projects_homepage{
  animation:work-grid-card-in .52s cubic-bezier(.22,1,.36,1) both
}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(2){animation-delay:.035s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(3){animation-delay:.07s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(4){animation-delay:.105s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(5){animation-delay:.14s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(6){animation-delay:.175s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(7){animation-delay:.21s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(8){animation-delay:.245s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(9){animation-delay:.28s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(10){animation-delay:.315s}
html.in-frame .work-reset .project-wrap>.projects_homepage:nth-child(11){animation-delay:.35s}
@keyframes work-grid-card-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  html.in-frame .work-reset .project-wrap>.projects_homepage{animation:none;opacity:1;transform:none}
}


/* Sophia Cafe: use the first still as a fast poster, then reveal the event clip on hover. */
@media(min-width:768px){
  .work-reset .project-wrap>.projects_homepage.project_sophia_cafe{
    position:relative;overflow:hidden;
    background:#211c18 url('/assets/projects/sophia-cafe/DSC04246.jpg') 50% 50%/cover
  }
  .work-reset .project-wrap>.projects_homepage.project_sophia_cafe .sophia-cafe-card-video{
    position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
    object-fit:cover;pointer-events:none
  }
}

/* Card cover photo (data-cover, added by work-hover-video.js): shows at rest, fades out while the card's video plays (2026-11-03) */
.projects_homepage .card-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity .45s ease}
.projects_homepage.is-playing .card-cover{opacity:0}
/* NAMA card video: lifted so the amuse-bouche sits higher in the card */
.projects_homepage.project_5 .diff_codemebed{transform:translateY(-10%)}