/* Kumppaneille · the phone (2026-09-24). The house cut into four bands.
   The finished house fills the screen with the claim; the scroll cuts it
   into four horizontal bands that shrink to their rows on their own
   clocks while each develops into its door's photograph, and the four
   doors stand as a register of prints and lines. Then Sama talo with its
   prints on the beam, and the walk's four cards, the page parking on
   each card's head. kumppaneille.js writes the geometry into custom
   properties. */
@media (max-width:860px) {
  .puhelin .k-talo { height:var(--pl-th, auto); }
  .puhelin .k-tlava { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper); }
  .puhelin .k-tavaus { position:absolute; inset:0; height:auto; padding:15svh 7vw 0; z-index:3;
    background:none; pointer-events:none; opacity:calc(1 - var(--pl-pois, 0));
    transform:translateY(calc(var(--pl-pois, 0) * -4svh)); will-change:opacity,transform; }
  .puhelin .k-tavaus h1 { font-size:clamp(30px,8.6vw,40px); max-width:none; }
  .puhelin .k-tavaus .k-quick { pointer-events:auto; }
  .puhelin .k-tmast { display:block; position:absolute; left:7vw; right:7vw; top:0; padding-top:12svh; z-index:3;
    pointer-events:none; opacity:var(--pl-mast, 0); transform:translateY(calc((1 - var(--pl-mast, 0)) * 2svh)); }
  .puhelin .k-tmast .kick { color:var(--muted); }
  .puhelin .k-tmast h1, .puhelin .k-tmast h2 { margin-top:1vh; font-family:var(--disp); font-size:clamp(24px,7vw,32px); font-weight:500;
    letter-spacing:-.025em; line-height:1.1; }
  .puhelin .k-tmast .k-mask { display:block; }
  .puhelin .k-liuskat { display:block; padding:0; }
  .puhelin .k-liuska { position:absolute; left:var(--pl-x, 0px); top:var(--pl-y, 0px);
    width:var(--pl-w, 100vw); height:var(--pl-h, 25svh); pointer-events:none; }
  .puhelin .k-liuska.on { pointer-events:auto; }
  .puhelin .k-lkuva { position:absolute; inset:0; aspect-ratio:auto; }
  .puhelin .k-lkuva .k-siivu { display:block; background-image:url(/img/grand-talo.jpg); background-repeat:no-repeat; }
  .puhelin .k-lkuva .k-ovikuva { opacity:var(--pl-ovi, 0); }
  /* the door's words beside its print once the row has formed */
  .puhelin .k-ltxt { position:absolute; left:calc(100% + 5vw); top:-.2vh; width:44vw; margin:0;
    opacity:var(--pl-txt, 0); transform:translateY(calc((1 - var(--pl-txt, 0)) * 1.4vh)); }
  .puhelin .k-llause { font-size:clamp(16px,4.6vw,20px); line-height:1.16; margin-top:.7vh; }
  .puhelin .k-lnimike { margin-top:.9vh; font-size:10px; }
  .puhelin .k-liuska .p { transform:scale(0); transform-box:border-box; transform-origin:60% 60%; }
  .puhelin .k-liuska.on .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .4s forwards; }

  /* Sama talo: prints on the beam */
  .puhelin .k-print { --t:0; }
  .puhelin.js .k-print img, .puhelin.js .k-print.on img { transition:none; will-change:filter;
    filter:sepia(calc(.45 * (1 - var(--t)))) saturate(calc(.6 + .4 * var(--t))) contrast(calc(.95 + .05 * var(--t))) brightness(calc(1.02 - .02 * var(--t))); }
  /* the walk: the page parks on each card's head; the beam reads the lines */
  .puhelin .k-lava { position:relative; }
  .puhelin .k-beat { --t:0; }
  .puhelin .k-blause, .puhelin .k-bvast { color:color-mix(in oklab, var(--muted), var(--ink) calc(var(--t) * 100%)); }
  .puhelin .k-bprint { --t:0; }
  .puhelin.js .k-bprint img { transition:none; will-change:filter;
    filter:sepia(calc(.45 * (1 - var(--t)))) saturate(calc(.6 + .4 * var(--t))) contrast(calc(.95 + .05 * var(--t))) brightness(calc(1.02 - .02 * var(--t))); }
}