/* Tekijät · the phone (2026-09-24). The deck. The page opens in the dark
   room (the desktop's opening, without the wall): the claim and the nine
   names in cream, tap a name to go to the person; then why we founded,
   still in the dark. Then the lights come on with the first person: the
   deck's first sheet mixes from the dark ground to paper as it rises, its
   print developing at the same time. Each person is one sheet the size of
   the screen, the portrait as a print across the top and the words
   under it; the next sheet slides up over the last and sticks (the deck),
   the page parking on each. The print develops and the period stamps as
   the sheet lands. Tekijä 10 keeps the withheld develop. */
@media (max-width:860px) {
  .puhelin .ptrack { display:none; }
  .puhelin .tka.tstill, .puhelin .tmiksi.tstill { --sun:var(--minttu); }   /* dark: mint */
  /* the dark opening */
  .puhelin .tka.tstill { background:#0b0906; color:var(--cream); padding:15svh 7vw 8svh;
    min-height:100svh; box-sizing:border-box; }
  .puhelin .tka.tstill .kick { color:var(--sun); }
  .puhelin .tka.tstill h1 { color:var(--cream); font-size:clamp(28px,8vw,38px); }
  .puhelin .tstill .nimet { margin-top:4svh; }
  .puhelin .tstill .nimi { color:var(--cream); padding:.08em 0 .12em; }
  .puhelin .tstill .nimi .nnimi { font-size:clamp(24px,7.2vw,34px); }
  .puhelin .tstill .nimi:active .nnimi { color:var(--sun); }
  .puhelin .tka-d .dalarivi { margin-top:5svh; }
  .puhelin .tka-d .dalarivi .intro { color:rgba(242,236,221,.66); }
  .puhelin .tka .tluvut { color:rgba(242,236,221,.45); }
  .puhelin .tka .tlahde { color:rgba(242,236,221,.34); }
  .puhelin .tmiksi.tstill { background:#0b0906; color:var(--cream); padding:6svh 7vw 22svh; }
  .puhelin .tmiksi .kick { color:var(--sun); }
  .puhelin .tmiksi h2 { color:var(--cream); }
  .puhelin .tmiksi .tmteksti p { color:rgba(242,236,221,.72); }

  /* the deck */
  .puhelin .pl-pino { position:relative; background:#0b0906; }
  .puhelin .hlo, .puhelin .hlo.oik, .puhelin .hlo.pieni, .puhelin .hlo.lahi, .puhelin .hlo.ilmava {
    --a:0; --vt:clamp(0, calc((var(--a) - .44) / .12), 1);
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:52svh minmax(0,1fr); gap:0;
    align-items:start; position:sticky; top:0; height:100svh; min-height:0;
    margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:var(--paper);
    /* a name tapped in the opening (or a #name link from another page) lands the sheet on
       the screen's top edge, where it sticks: the nav's scroll padding would stop it 60px
       short, with the last sheet still showing above and the contact lines cut below */
    scroll-margin-top:-60px; }
  .puhelin .hlo.oik .hkuva { order:0; }
  /* the first sheet is the light switch: its ground mixes from the dark
     room to paper as it rises, in sRGB (a linear mix reads as fog) */
  .puhelin .hlo.pl-eka { background:color-mix(in srgb, #0b0906, var(--paper) calc(var(--a) * 100%)); }
  .puhelin .hlo.pl-eka .hsanat { color:color-mix(in srgb, var(--cream), var(--ink) calc(var(--vt) * 100%)); }
  .puhelin .hlo.pl-eka .sitaatti, .puhelin .hlo.pl-eka .hnimi { color:inherit; }
  .puhelin .hkuva, .puhelin .hlo.pieni .hkuva, .puhelin .hlo.lahi .hkuva { width:100%; max-width:none; margin:0;
    height:52svh; overflow:hidden; }
  .puhelin .hkuva img, .puhelin .hlo.on .hkuva img { width:100%; height:100%; object-fit:cover; object-position:50% 12%;
    transition:none; will-change:transform,filter; transform:scale(calc(1.08 - .08 * var(--a)));
    filter:grayscale(calc(.85 * (1 - var(--a)))) sepia(calc(.14 * (1 - var(--a)))) contrast(calc(.96 + .04 * var(--a)))
           brightness(calc(1.02 - .02 * var(--a) + .3 * (1 - var(--a)) * var(--pl-pimea, 0))); }
  .puhelin .hlo.pl-eka .hkuva img { --pl-pimea:0; filter:grayscale(calc(.85 * (1 - var(--a)))) sepia(calc(.14 * (1 - var(--a))))
    brightness(calc(.35 + .67 * var(--a))); }
  .puhelin .tyhja .hkuva img, .puhelin .tyhja.on .hkuva img { filter:grayscale(.92) sepia(.16) contrast(.95) brightness(1.03); }
  .puhelin .hkuva figcaption { display:none; }
  .puhelin .hsanat { margin:0; padding:2.8svh 7vw max(2.6svh, env(safe-area-inset-bottom)); min-height:0;
    opacity:calc(.25 + .75 * var(--a)); transform:translateY(calc((1 - var(--a)) * 3svh)); will-change:transform,opacity; }
  .puhelin .sitaatti { font-size:clamp(19px,5.6vw,24px); line-height:1.28; max-width:none; }
  .puhelin .hnimi { margin-top:2.2svh; font-size:clamp(17px,4.8vw,20px); }
  .puhelin .hrooli { margin-top:5px; font-size:10.5px; }
  .puhelin .hfakta { margin-top:1.5svh; font-size:14px; line-height:1.55; max-width:none; }
  .puhelin .hyhteys { margin-top:1.6svh; }
  .puhelin .hyhteys a, .puhelin .hyhteys.iso a { font-size:14px; line-height:1.75; }
  .puhelin .hviso { margin-top:1.6svh; font-size:clamp(18px,5vw,22px); }
  /* the words' own reveals stand down: the sheet's arrival is the clock */
  .puhelin .hsanat .rv { opacity:1; transform:none; transition:none; }
  /* the sheets' periods wait for their sheet to land; the page's own claim above the names
     keeps its stamp (a bare .stamp rule left "Avainhenkilöt töissä itse" without its period) */
  .puhelin .hlo .stamp .p { transform:scale(0); animation:none; }
  .puhelin .hlo.pl-perilla .stamp .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .15s forwards; }
}