/* ═══════════════════════════════════════════════════════════════════════
   NORDEVO · puhelin (2026-09-24, on trial). The phone layer's shared
   grammar, loaded on the six main pages. Everything lives behind
   (max-width:860px) and body.puhelin (set by puhelin.js at <=860 wide and
   >=560 tall with motion allowed), so the desktop, landscape phones,
   no-JS and reduced motion never meet it.

   1  THE SCROLL IS THE HOVER. There is no pointer, so the reading beam
      (the band just above the screen's centre, the word list's own) does
      what hover does on the desktop: the row under the beam is in full ink,
      its rule draws, its print lifts and develops. puhelin.js writes --t
      (0..1) on every [data-valo].
   2  PRINTS AT PHONE SCALE. A print lies inside the 7vw measure and opens
      past its margins to the full width while it passes the beam,
      developing from duotone to colour. Transform only.
   Revised after Anton's phone test the same day: no scroll snapping, no
   gesture finishing and no footer lift on phones any more (see puhelin.js).
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width:860px) {
  .puhelin [data-valo] { --t:0; }

  /* prints: the site's .plate grammar on the phone. The figure is laid full
     bleed (it escapes the 7vw padding) and the print inside is scaled to the
     measure at rest, 1 on the beam; the develop rides --t */
  .puhelin .plate.pl-vedos { margin-left:-7vw; margin-right:-7vw; width:auto; padding:0;
    --pl-lepo:.86; }
  .puhelin .plate.pl-vedos .ph { transform:scale(calc(var(--pl-lepo) + (1 - var(--pl-lepo)) * var(--t)));
    transform-origin:50% 50%; opacity:1; transition:none; }
  .puhelin .plate.pl-vedos .ph img, .puhelin .plate.pl-vedos.on .ph img {
    transform:translateY(var(--dy,0px)) scale(1.06);
    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)));
    transition:none; }
  .puhelin .plate.pl-vedos figcaption { padding:0 7vw; opacity:1; transform:none; transition:none; }
}