/* ═══════════════════════════════════════════════════════════════════════
   NORDEVO — Tekijät: porukka (2026-09-01, Anton: "this is us, but how we
   make this look makes the difference"). The simplest content there is,
   person · title · one dry line · a QUOTE, and the presentation carries
   it: each spread's quote is its display element (Newsreader at display
   scale, stamped period), and tekijat.js drifts the print and the words
   past each other on their own clocks. No counters, no stations.
   Loaded after nordevo.css + alasivu.css on /tekijat/ only.

   Rest states ARE the CSS defaults: transforms none, every spread a
   complete poster — the pre-JS first paint, ?flat=1, no-JS and
   reduced-motion all print the same page. tekijat.js only drifts away
   from these and glides back home.

   MOCK IMAGES print with mix-blend-mode:multiply: the studio portraits'
   pale ground melts into the paper so they lie on it like prints. The
   real shoot (TEKIJAT-KUVAUS.md, Block 2 solos) needs no blending.

   HUOM: sitaatit ovat luonnoksia — katso PLACEHOLDER-SITAATTI
   index.html:ssä ennen julkaisua.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the stamped period (subpage twin of .miso/.khnimi patterns) ─────── */
.stamp .p { display:inline-block; transform:scale(0); transform-box:border-box;
  transform-origin:60% 60%; color:var(--sun); }
.stamp.on .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .55s forwards; }
.liitos { white-space:nowrap; }
.no-js .stamp .p, .static .stamp .p { transform:none; animation:none; }

/* ── avaus ───────────────────────────────────────────────────────────── */
.tka { padding:26vh 12vw 10vh; }
.tka .ylarivi { display:flex; justify-content:space-between; align-items:baseline; gap:4vw; }
.tka .nurkka { font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tka h1 { margin-top:2.5vh; font-family:var(--disp); font-size:clamp(32px,4.4vw,63px);
  font-weight:500; letter-spacing:-.026em; line-height:1.12; max-width:22ch; }
.tka .intro { margin-top:3.5vh; font-size:clamp(15.5px,1.35vw,18px); line-height:1.75;
  color:var(--faded); max-width:56ch; }
.tka .vitsi { margin-top:2.2vh; color:var(--ink); }
.tka .tluvut { margin-top:7vh; font-family:var(--sans); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); line-height:2.3; }
.tka .tlahde { margin-top:1vh; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#b3a88f; }

/* ── avaus: the nine names as the page's opening register ────────────── */
/* The names are the first screen in both worlds: ink on paper in the still
   page (.tstill), cream over the dark wall in the stage. They rise out of
   their own line masks one after another, .nimet.on; the still page prints
   them parked, because nothing there is allowed to move. */
.tka-d { padding-top:18vh; }
.nimet { margin-top:5vh; }
.nimi { display:flex; justify-content:space-between; align-items:baseline; gap:4vw; overflow:hidden;
  padding:.06em 0 .1em; text-decoration:none; color:var(--ink); will-change:transform; }
.nimi .nnimi { display:block; font-family:var(--disp); font-size:clamp(26px,3.4vw,50px); font-weight:500;
  letter-spacing:-.026em; line-height:1.1; transform:translateY(116%);
  transition:transform 1s cubic-bezier(.22,1,.36,1) calc(var(--i) * .075s), color .4s ease; }
.nimi .nrooli { font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; opacity:0;
  transition:opacity .9s ease calc(var(--i) * .075s + .5s); }
.nimet.on .nimi .nnimi { transform:none; }
.nimet.on .nimi .nrooli { opacity:1; }
.nimet.heti .nimi .nnimi, .nimet.heti .nimi .nrooli { transition:none; }   /* ?fz / ?flat: printed, not played */
.nimi:hover .nnimi { color:var(--sun); }
.no-js .nimi .nnimi, .static .nimi .nnimi, .tstill .nimi .nnimi { transform:none; }
.no-js .nimi .nrooli, .static .nimi .nrooli, .tstill .nimi .nrooli { opacity:1; }
.tka-d .dalarivi { margin-top:7vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3vh 6vw; align-items:end; }
.tka-d .dalarivi .intro { margin:0; max-width:40ch; justify-self:end; grid-column:2; }
.tka-d .dalarivi .tluvut { margin:0; grid-column:1; grid-row:1; }
.tka-d .dalarivi .tlahde { grid-column:1; grid-row:2; }
.pimea .tstill[hidden] { display:none; }

/* ── the dark opening: two screens of words over the flat wall ───────── */
/* putki.js paints the stage's ground every frame while the lights come on;
   the colour here is only the first paint. The words are one column that
   moves with the scroll, one to one (2026-09-17, Anton: the hero to the text
   is just normal scroll), and both screens are gone before the switch, so
   nothing but the wall has to cross from cream to ink. */
.pimea .pstage { background:#0b0906; }
.pteksti { position:absolute; inset:0; z-index:3; pointer-events:none; will-change:transform; }
.pruutu { height:100vh; padding:11vh 12vw 7vh; display:flex; flex-direction:column; }
.pruutu .kick { color:var(--sun); }
.pruutu .ylarivi { display:flex; justify-content:space-between; align-items:baseline; gap:4vw; }
.pruutu .nurkka { font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(242,236,221,.45); }
.pruutu .pmast { margin-top:2vh; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:2vh 6vw; align-items:end; }
.pruutu h1 { font-family:var(--disp); font-size:clamp(28px,min(3.5vw,6.2vh),50px); font-weight:500;
  letter-spacing:-.026em; line-height:1.1; max-width:20ch; color:var(--cream); }
.pruutu .pintro { margin-bottom:.35em; font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.7;
  color:rgba(242,236,221,.66); max-width:36ch; justify-self:end; }
.pruutu .nimet { margin-top:4vh; flex:none; }
.pruutu .nimi { color:var(--cream); }
/* the nine names are one screen: their size follows the width and, on a wide short window
   (1440x700, 1920x700), the height too, or the list runs past the screen it belongs to */
.pruutu .nimi .nnimi { font-size:clamp(20px,min(2.75vw,4.9vh),40px); line-height:1.12; }
.pruutu .nimi .nrooli { font-size:10px; color:rgba(242,236,221,.34); }
.pruutu .nimet .nimi { pointer-events:auto; }
.pruutu .tluvut { margin-top:auto; font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(242,236,221,.45); }
.pruutu2 { justify-content:center; padding-top:16vh; }
.pruutu2 h2 { margin-top:2.2vh; font-family:var(--disp); font-size:clamp(26px,3.2vw,46px); font-weight:500;
  letter-spacing:-.025em; line-height:1.14; max-width:17ch; color:var(--cream); }
.pruutu2 .pmteksti { margin-top:5vh; margin-left:38%; max-width:52ch; }
.pruutu2 .pmteksti p { font-size:clamp(15px,1.3vw,17.5px); line-height:1.78; color:rgba(242,236,221,.72); }
.pruutu2 .pmteksti p + p { margin-top:2.4vh; }

@media (max-width:860px) {
  .nimi .nrooli { display:none; }
  .tka-d .dalarivi { grid-template-columns:1fr; }
  .tka-d .dalarivi .intro, .tka-d .dalarivi .tluvut, .tka-d .dalarivi .tlahde { grid-column:auto; grid-row:auto; }
}

/* ── miksi: why the company exists, in prose ─────────────────────────── */
.tmiksi { padding:6vh 12vw 12vh; }
.tmiksi h2 { margin-top:2.2vh; font-family:var(--disp); font-size:clamp(26px,3.2vw,48px);
  font-weight:500; letter-spacing:-.025em; line-height:1.14; max-width:18ch; }
.tmiksi .tmteksti { margin-top:4vh; margin-left:auto; max-width:56ch; }
.tmiksi .tmteksti p { font-size:clamp(15.5px,1.35vw,18px); line-height:1.78; color:#3c3424; }
.tmiksi .tmteksti p + p { margin-top:2.6vh; }
@media (min-width:861px) { .tmiksi .tmteksti { margin-left:38%; } }

/* ── the spreads ─────────────────────────────────────────────────────── */
.hlo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:6vh 6vw; align-items:center; min-height:86vh; padding:10vh 12vw; }
.hlo.oik .hkuva { order:2; }

/* the print: lies on the paper, develops to colour when the spread lights */
.hkuva { width:min(24vw,370px); margin:0 auto; }
.hkuva img { display:block; width:100%; height:auto; mix-blend-mode:multiply;
  filter:grayscale(.85) sepia(.14) contrast(.96) brightness(1.02);
  transition:filter 1.2s ease .1s; }
.hlo.on .hkuva img { filter:none; }
.no-js .hkuva img, .static .hkuva img { filter:none; }
.hkuva figcaption { margin-top:12px; font-family:var(--sans); font-size:12.5px;
  letter-spacing:.05em; color:var(--muted); }

/* print scale rhythm: the repeat must read as rhythm, not template */
.hlo.pieni .hkuva { width:min(21vw,320px); }
.hlo.lahi  .hkuva { width:min(28vw,430px); }
.hlo.ilmava { padding-top:18vh; padding-bottom:16vh; }

/* the words: quote first (the display element), then the gallery label */
.sitaatti { font-family:"Newsreader", Georgia, serif; font-weight:300;
  font-size:clamp(24px,2.5vw,40px); line-height:1.3; letter-spacing:-.005em;
  color:var(--ink); max-width:21ch; }
.hnimi { margin-top:3.6vh; font-family:var(--disp); font-weight:600;
  font-size:clamp(18px,1.55vw,23px); letter-spacing:-.02em; }
.hrooli { margin-top:8px; font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.hfakta { margin-top:2.4vh; font-size:clamp(15px,1.3vw,17.5px); line-height:1.72;
  color:var(--faded); max-width:46ch; }
.hfakta a { color:var(--ink); text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--sun); }
.hyhteys { margin-top:2.6vh; }
.hyhteys a { display:block; width:fit-content; font-family:var(--sans); font-size:13px;
  color:var(--faded); text-decoration:none; line-height:1.9;
  background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 100%/0 1px;
  transition:color .4s ease, background-size .5s cubic-bezier(.22,1,.36,1); }
.hyhteys a:hover { color:var(--ink); background-size:100% 1px; }
.hyhteys.iso a { font-size:15px; }
/* the line the page ends on (Juuso) */
.hviso { margin-top:4.2vh; font-family:var(--disp); font-weight:500;
  font-size:clamp(22px,2.3vw,36px); letter-spacing:-.025em; line-height:1.15; }

/* ── tekijä 10: the withheld develop, the unwritten quote ────────────── */
/* the duotone IS this print's final state — no .on ever lifts it, and the
   quote stands in the support grey: neither exists until the tenth does */
.tyhja .hkuva img, .tyhja.on .hkuva img,
.no-js .tyhja .hkuva img, .static .tyhja .hkuva img {
  filter:grayscale(.92) sepia(.16) contrast(.95) brightness(1.03); }
.tyhja .sitaatti { color:var(--muted); }
.tyhja .sitaatti .p { color:var(--muted); }

/* ── arrivals (desktop): the quote slides in from the print's side ───── */
@media (min-width:861px) {
  .js .hlo .sitaatti.rv { transform:translate(-38px,12px); }
  .js .hlo.oik .sitaatti.rv { transform:translate(38px,12px); }
  .js .hlo .sitaatti.rv.on { transform:none; }
  /* the drift machine writes transforms here (tekijat.js) */
  .js:not(.static) .hkuva, .js:not(.static) .hsanat { will-change:transform; }
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .hlo { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:5vh 5vw; }
  .hkuva { width:min(30vw,370px); }
  .hlo.pieni .hkuva { width:min(26vw,320px); }
  .hlo.lahi .hkuva { width:min(34vw,430px); }
}
@media (max-width:860px) {
  .tka { padding:22vh 7vw 8vh; }
  .hlo { display:block; min-height:0; padding:9vh 7vw 8vh; }
  .hkuva, .hlo.pieni .hkuva, .hlo.lahi .hkuva { width:min(72vw,390px); margin:0; }
  .hsanat { margin-top:4.5vh; }
  .sitaatti { font-size:clamp(23px,6.6vw,30px); }
  .hlo.ilmava { padding-top:11vh; padding-bottom:11vh; }
}

/* ── the tube (2026-09-03): desktop, WebGL2, motion. /tekijat/putki.js turns
   #tputki on, hides the nine spreads (they stay the still page everywhere
   else) and runs the tube in the pinned stage. Class names carry a p so
   nothing meets nordevo.css. Rest state: the track is hidden. ─────────── */
.ptrack { position:relative; }
.pstage { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper); }
.pstage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* the rows dissolve into the paper before the stage's top and bottom edges, so
   the section above never slices a print while the stage scrolls in or out */
.pstage canvas, .plbls { -webkit-mask-image:linear-gradient(to bottom, transparent, #000 24%, #000 80%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 24%, #000 80%, transparent); }
.pstage.hit { cursor:pointer; }
.plbls { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.plbl { position:absolute; left:0; top:0; padding:0; border:0; background:none; cursor:pointer;
  transform-origin:50% 0; will-change:transform,opacity; text-align:center; pointer-events:auto;
  font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:-.01em; line-height:1.15;
  white-space:nowrap; color:var(--ink); opacity:0; }
.plbl small { display:block; margin-top:3px; font-weight:500; font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.plbl:focus-visible { outline:1px solid var(--sun); outline-offset:6px; }
/* the words: every person's block in the same cell, the spread's own lines;
   putki.js fades each line on its own beat and stamps the period when lit */
.psanat { position:absolute; left:60%; top:0; bottom:0; width:30%; display:grid; align-items:center; will-change:transform; }
.pwd { grid-area:1/1; visibility:hidden; }
.pwd > * { will-change:transform,opacity; opacity:0; }
.psnap { position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start; pointer-events:none; }
html.psnap-on { scroll-snap-type:y proximity; }
.tputki.on .hlo { display:none; }

.tstill .nimi:hover .nnimi { color:var(--faded); }

.tka .tlahde { color:var(--muted); font-size:12px; }
.pruutu .nimi .nrooli { font-size:12px; letter-spacing:.13em; color:rgba(242,236,221,.66); }
.pruutu .nurkka, .pruutu .tluvut { color:rgba(242,236,221,.66); }