/* Kohteemme · the phone (2026-09-24). The kulku walk, staged vertically:
   a pinned screen the reader walks through. The white kitchen wipes away
   in three horizontal bands (bottom first) to the morning wall; the three
   plates walk UP past the wall, each developing to colour as it crosses
   the middle; the flight over the finished house slides up slower, from
   further away, and plays only once landed; "Aloitetaan kodeista." lights
   on it. Then the Grand print opening (already on phones), and the
   chapters' prints on the beam. kohteemme.js writes the numbers into
   custom properties: the site's phone rules pin the walk's parts with
   !important, so the phone staging reads them through variables and
   says !important back. */
@media (max-width:860px) {
  .puhelin .kulku { height:var(--pl-kh, auto) !important; }
  .puhelin .kulku .kpin { display:block; position:sticky; top:0; height:100vh; overflow:hidden;
    background:var(--paper); }
  /* the wall: the one still morning behind the walk */
  .puhelin .kseina { display:block; position:absolute; inset:0; z-index:1; }
  .puhelin .kseina img { width:100%; height:100%; object-fit:cover; object-position:var(--pl-seina, 33% 50%); }
  /* the flight: far layer, under the plates, over the wall */
  .puhelin .kpohja { position:absolute; inset:0; z-index:2; overflow:hidden; aspect-ratio:auto;
    transform:translate3d(0, var(--pl-fy, 100%), 0) !important; will-change:transform; }
  .puhelin .kpohja video { width:100%; height:100%; object-fit:cover; }
  /* the kitchen in three bands, each showing its third of the full frame
     and cropping from its bottom edge as it wipes */
  .puhelin .khero { position:absolute; inset:0; z-index:3; aspect-ratio:auto; margin:0; }
  .puhelin .hsiivu, .puhelin .hsiivu:first-child { display:block; position:absolute; left:0; right:0; width:auto;
    top:calc(var(--i) * 33.334%); height:33.5%; overflow:hidden; will-change:clip-path;
    clip-path:inset(0 0 var(--pl-clip, 0%) 0) !important; -webkit-clip-path:inset(0 0 var(--pl-clip, 0%) 0) !important; }
  .puhelin .hsiivu img, .puhelin .hsiivu:first-child img { position:absolute; left:0 !important; width:100%;
    height:100vh; top:calc(var(--i) * -33.334vh); object-fit:cover; object-position:50% 50%; }
  /* the head over the kitchen, leaving upward with the first band */
  .puhelin .kulku .krata { display:block; position:absolute; inset:0; z-index:4; pointer-events:none;
    height:auto; width:auto; }
  .puhelin .kulku .kintro { position:absolute; left:0; right:0; top:0; padding:13svh 7vw 0;
    width:auto; pointer-events:auto; background:none; will-change:transform,opacity;
    opacity:calc(1 - var(--pl-ip, 0)); transform:translateY(calc(var(--pl-ip, 0) * -30svh)); }
  .puhelin .kulku .kintro h1 { font-size:clamp(28px,8.4vw,40px); }
  /* the plates: on the wall, walking up; sizes and offsets alternate */
  .puhelin .kulku .klevy, .puhelin .kulku .klevy:nth-of-type(n) { position:absolute; display:block; margin:0;
    top:100vh; will-change:transform; pointer-events:auto;
    transform:translate3d(0, var(--pl-y, 0px), 0) !important; }
  .puhelin .kulku .klevy:nth-of-type(1) { left:7vw; width:80vw; }
  .puhelin .kulku .klevy:nth-of-type(2) { left:auto; right:7vw; width:66vw; }
  .puhelin .kulku .klevy:nth-of-type(3) { left:9vw; width:74vw; }
  .puhelin .kkuva img { will-change:filter;
    filter:sepia(calc(.45 * (1 - var(--pl-dev, 0)))) saturate(calc(.6 + .4 * var(--pl-dev, 0)))
           contrast(calc(.95 + .05 * var(--pl-dev, 0))) brightness(calc(1.02 - .02 * var(--pl-dev, 0))) !important; }
  .puhelin .klappu { padding:12px 14px 14px; }
  /* the closing line on the flight */
  .puhelin .kpaatos { position:absolute; z-index:5; left:7vw; right:7vw; bottom:9svh; margin:0; padding:0;
    color:var(--cream); pointer-events:none; --sun:var(--minttu);   /* back on the flight: the dark accent */
    opacity:var(--pl-lp, 0); transform:translateY(calc((1 - var(--pl-lp, 0)) * 16px)); }
  .puhelin .kpaatos small { color:rgba(242,236,221,.66); }

  /* the chapters' prints on the beam */
  .puhelin .kaksio { gap:5vh 0; }
}