/* HERO SEAM: into the paint. Pairs with templates/hero.html and js/hero.js. */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden}
.hero .stage{position:absolute;inset:0;overflow:hidden}
#cam{position:absolute;left:0;top:0;width:696px;height:1110px;transform-origin:0 0;will-change:transform}
.js .hero:not(.on) #cam{opacity:0}   /* no unplaced frame before the first render */
#cam img{position:absolute;max-width:none}
#thinker{left:0;top:0;width:696px;height:1110px;box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
/* the close-up is feathered into the painting photo while its edges are on screen during the dive.
   js/hero.js runs --f down to 0 before the frame settles, so the landed panel is edge to edge. */
#macro{left:240px;top:142px;width:288px;height:512px;opacity:0;--f:0%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent),linear-gradient(180deg,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent),linear-gradient(180deg,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent);mask-composite:intersect}
.panel-shadow{position:absolute;pointer-events:none;box-shadow:0 46px 70px -28px rgba(0,0,0,.95),0 14px 24px -12px rgba(0,0,0,.7);opacity:0}
.brackets{position:absolute;pointer-events:none;opacity:0}
.brackets i{position:absolute;width:22px;height:22px;border:0 solid rgba(238,234,227,.95)}
.brackets i:nth-child(1){left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.brackets i:nth-child(2){right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.brackets i:nth-child(3){left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.brackets i:nth-child(4){right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
/* the zoom readout shows during the dive only */
.chip{position:absolute;left:24px;bottom:24px;padding:10px 16px;border-radius:999px;background:rgba(15,14,13,.92);border:1px solid var(--line);font:500 20px/1 "Geist Mono",monospace;letter-spacing:-.03em;font-variant-numeric:tabular-nums;opacity:0}
.hero .side{position:absolute;left:var(--gut);bottom:12vh;width:calc(44vw - var(--gut) - 24px)}
.hero .sub{margin-top:36px;font-size:18px;line-height:1.5;color:var(--ink-2);max-width:30ch}
.hero .sub b{color:var(--ink);font-weight:500}
.hero .side .btn{margin-top:26px}
/* the third term keeps the lockup (about 4.05em wide) inside the left column on narrow desktops and tablets */
.wordmark{display:flex;margin-left:-.04em;font-size:min(9.4vw,17vh,(44vw - var(--gut) - 24px)/4.05);font-stretch:112%;pointer-events:none}
/* letter mask via clip-path, not overflow, so baseline alignment survives */
.wordmark .lt{display:inline-block;clip-path:inset(-.3em -.1em 0 -.1em)}
.wordmark .lt span{display:inline-block}
#flyer{position:absolute;left:0;top:0;height:auto;transform-origin:50% 50%;opacity:0;pointer-events:none;z-index:3}
/* scripted start states. Without JS the wordmark, line and button simply stand in place. */
.js .wordmark .lt span{transform:translateY(110%)}
.js .wordmark .o img,.js .hero .ui{opacity:0}

/* no-JS: a still of the close-up stands where the camera would land */
.hero-still{position:absolute;right:0;top:0;width:56%;height:100%;object-fit:cover;object-position:39% 42%}
html:not(.js) .hero .stage,html:not(.js) #flyer{display:none}

.phone-pic{display:none}

/* PHONE (<768): no dive (js/hero.js lands at once). The whole canvas fills the width from the top edge (never past
   its own pixels: 1008px wide), then the wordmark, line and button; the space left over sits between them.
   On short screens the canvas gives up height first (cropped top and bottom) so the button stays on the first screen. */
@media (max-width:767px){
  .hero{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:44px}
  .hero .stage,.panel-shadow,.brackets,.chip,#flyer,.hero-still{display:none}
  .phone-pic{display:block;flex:none}
  .phone-pic img{width:100%;max-width:1008px;height:min(calc(100vw * 1349 / 1008),calc(100svh - 300px));object-fit:cover;
    box-shadow:0 40px 60px -30px rgba(0,0,0,.6),0 12px 20px -12px rgba(0,0,0,.45)}
  .hero .side{position:static;width:auto;margin-top:28px;padding:0 20px}
  .wordmark{font-size:17.5vw}
  .hero .sub{margin-top:22px;font-size:16px}
  .hero .side .btn{margin-top:20px}
}