/* The homepage case sheet's step to its project page (sheet.js, docs/18, Moving between pages), linked on the homepage
   after the site's stylesheet since its links to the new pages (30 September 2026). While the sheet shows a project
   that has a page, it is set exactly as the page's head, the words clear of the nav's place (108px) and the real
   screenshot under an 89px band, so the page opens under it as the same thing */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.case.pj-live .case-body{padding-top:calc(env(safe-area-inset-top,0px) + 108px)}
.case.pj-live .case-media{background:var(--paper)}
.case.pj-live .case-media canvas{visibility:hidden}
.pj-sheet-pic{position:absolute;inset:0;display:block}
.case.pj-live .case-cover{inset:calc(env(safe-area-inset-top,0px) + 89px) 0 0}
.pj-sheet-pic img{position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + 89px);width:100%;height:calc(100% - env(safe-area-inset-top,0px) - 89px);object-fit:cover;object-position:50% 0;background:var(--mist);box-shadow:inset -1px 0 0 rgba(18,17,20,.13)}
/* Start a similar project, now a text link beside Visit, the sheet's own link style, both with the site's hit area */
.pj-cta-link{font-size:15px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(18,17,20,.25);padding-bottom:2px;transition:border-color .3s}
.pj-cta-link:hover{border-color:var(--red)}
.pj-cta-link,.case.pj-live .case-link{position:relative}
.pj-cta-link::after,.case.pj-live .case-link::after{content:"";position:absolute;inset:-10px -6px}
.case.pj-live .case-link[data-live-state]::after{content:none}
@media (max-width:1100px){
  .case.pj-live .case-body{padding-top:28px}
}
@media (max-width:760px){
  .case.pj-live .case-cover{inset:calc(env(safe-area-inset-top,0px) + 79px) 0 0}
  .pj-sheet-pic img{top:calc(env(safe-area-inset-top,0px) + 79px);height:calc(100% - env(safe-area-inset-top,0px) - 79px)}
}
/* the strips' focus on the campaign, as the page's head frames it (project.css) */
@media (max-width:1100px) and (min-width:761px) and (min-height:561px) and (orientation:landscape){
  .pj-sheet-pic img{object-position:var(--pj-focus-wide,50% 0)}
}
@media (max-width:760px) and (min-height:561px){
  .pj-sheet-pic img{object-position:var(--pj-focus-phone,50% 0)}
}
/* a phone on its side keeps the split, as the page's head does. The homepage's case.js sets the picture's size inline
   (mediaTarget), so the preview needs !important. The real sheet changes mediaTarget instead (docs/18, proposals) */
@media (max-height:560px){
  .case.pj-live .case-cover{inset:calc(env(safe-area-inset-top,0px) + 89px) 0 0}
  .case.pj-live .case-in{flex-direction:row}
  .case.pj-live .case-media{width:42%!important;height:100%!important}
  .case.pj-live .case-body{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
  .pj-sheet-pic img{top:calc(env(safe-area-inset-top,0px) + 89px);height:calc(100% - env(safe-area-inset-top,0px) - 89px)}
}