/* ═══════════════════════════════════════════════════════════════════════
   NORDEVO — Kumppaneille. Neljä ovea samaan taloon.
   The arc: the finished house full bleed, which the scroll cuts into four
   strips that shrink to their columns on their own clocks and develop
   into each door's photograph (the register). Then Sama talo on paper
   (#perustiedot): the house between the doors and the walk, a break that
   says what we do: the masthead, prints on the table, the career numbers
   counting up, and the sauna seam print opening past its margins. (The
   value triad died in the 2026-09-04 copy pass, the bank-sheet register on
   2026-09-09: those facts live on Konserni; no rules are left on the page.) Then the walk: one door per
   viewport, the visitor's line in serif, the answer in grotesk, the whole
   room's text, three prints arriving staggered and drifting on their own
   clocks. Desktop only (>=861px wide and >=700px tall, JS, motion allowed);
   everything else is the still page. Generated from
   design-directions/kumppaneille-2026-09/build.py (port); edit there or
   here, but not both. Loaded after nordevo.css and alasivu.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* position:sticky dies under body{overflow-x:hidden} in Chrome, and a clip on html
   propagates to the viewport and blanks everything past the first screen. So the
   viewport stays visible and main clips sideways overflow on its own. */
html, body { overflow-x:visible; }
main { overflow-x:clip; }

.liitos { white-space:nowrap; }
.p { display:inline-block; color:var(--sun); }
.js .rv .p, .js .k-pop .p { transform:scale(0); transform-box:border-box; transform-origin:60% 60%; }
.js .rv.on .p, .js .k-pop.on .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .55s forwards; }


/* ── huoneet: one room per door, ids = future page slugs ─────────────── */
.huone { position:relative; padding:17vh 12vw 5vh; }
.huone:last-of-type { padding-bottom:12vh; }
.hsis { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.6fr);
  gap:6vh 7vw; align-items:start; }
.huone--kapea .hsis { grid-template-columns:minmax(0,1fr); }
.huone--kapea .hmain { max-width:50vw; }
.hnro { font-family:var(--sans); font-size:11.5px; letter-spacing:.2em; color:var(--muted);
  margin-bottom:1.2vh; font-variant-numeric:tabular-nums; }
.hvast { margin-top:2.6vh; font-family:var(--disp); font-size:clamp(27px,3.15vw,46px);
  font-weight:500; letter-spacing:-.025em; line-height:1.16; max-width:24ch; }
.hteksti { margin-top:3vh; font-size:clamp(15.5px,1.35vw,18px); line-height:1.75;
  color:var(--faded); max-width:54ch; }
.hvast + .hteksti { margin-top:4.2vh; }
.hfine { margin-top:4.5vh; font-size:14.5px; color:var(--muted); max-width:52ch; line-height:1.7; }
.hteksti a, .hfine a { color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--sun); }

/* fact margin: numbers stacked in air */
.hlisa { margin-top:9.5vh; }
.hf { padding:0 0 4.2vh; }
.hf .n { font-family:var(--disp); font-size:clamp(29px,2.76vw,42px); font-weight:400;
  letter-spacing:-.035em; line-height:1.05; }
.hf .l { margin-top:6px; font-size:15px; color:var(--faded); }
.hf .s { margin-top:2px; font-size:13px; color:var(--muted); line-height:1.5; }
.sitaatti { margin-top:1vh; font-size:16px; line-height:1.7; color:var(--faded); max-width:30ch; }
.sitaatti span { display:block; margin-top:8px; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* photo margin: a print that develops on entry */
.hkuva { margin-top:9.5vh; }
.hkuva img { width:100%; height:auto;
  filter:sepia(.45) saturate(.6) contrast(.95) brightness(1.02);
  transition:filter 2.2s ease .2s; }
.hkuva.on img, .no-js .hkuva img, .static .hkuva img { filter:none; }
.hkuva figcaption { margin-top:14px; font-size:14px; color:var(--muted); line-height:1.6; }
.hkuva figcaption b { display:block; font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faded); margin-bottom:4px; }

/* maanomistajan kolme askelta */
.askeleet { margin-top:5.5vh; max-width:58ch; }
.askel { display:grid; grid-template-columns:70px 1fr; gap:0 2vw; padding:1.6vh 0; align-items:baseline; }
.askel .no { font-family:var(--disp); font-size:clamp(23px,2.1vw,32px); font-weight:400;
  letter-spacing:-.035em; color:var(--sun); }
.askel p { font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.7; color:var(--faded); }
.askel b { color:var(--ink); font-weight:500; }

/* every room ends at a person */
.ihmiset { margin-top:7.5vh; display:flex; gap:5vh 7vw; flex-wrap:wrap; }
.ihminen .kuka { font-family:var(--disp); font-size:clamp(18px,1.5vw,21px); font-weight:600;
  letter-spacing:-.015em; }
.ihminen .mika { margin-top:6px; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ihminen a { display:block; margin-top:10px; font-family:var(--sans); font-size:13px;
  color:var(--faded); text-decoration:none; line-height:1.75; width:fit-content;
  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); }
.ihminen a + a { margin-top:2px; }
.ihminen a:hover { color:var(--ink); background-size:100% 1px; }
.ihminen .huom { margin-top:12px; font-size:13.5px; color:var(--muted); }

@media (max-width:1100px) {
  .hsis { grid-template-columns:minmax(0,1.05fr) minmax(0,.7fr); gap:6vh 5vw; }
}
@media (max-width:860px) {
  .huone { padding:12vh 7vw 4vh; }
  .huone--kapea .hmain { max-width:none; }
  .hsis { grid-template-columns:1fr; gap:2vh 0; }
  .hlisa, .hkuva { margin-top:5vh; }
  .askel { grid-template-columns:52px 1fr; }
}


.k-talo { position:relative; }
.k-tlava { position:relative; }
.k-tavaus { position:relative; height:74vh; background:url(/img/grand-talo.jpg) center/cover no-repeat;
  padding:20vh 7vw 0; color:var(--cream); }
.k-tavaus .kick { color:var(--cream); opacity:.85; }
.k-tavaus h1 { margin-top:2vh; font-family:var(--disp); font-size:clamp(34px,5.2vw,78px); font-weight:500;
  letter-spacing:-.025em; line-height:1.05; max-width:14ch; }
.k-tavaus h1 .p { color:var(--cream); }
.k-tmast { display:none; }
.k-liuskat { display:grid; grid-template-columns:repeat(2,1fr); gap:8vh 5vw; padding:10vh 7vw 4vh; }
.k-liuska { position:relative; display:block; text-decoration:none; color:var(--ink); }
.k-lkuva { display:block; position:relative; aspect-ratio:4/5; overflow:hidden; }
.k-lkuva i { position:absolute; inset:0; background-size:cover; background-position:center; }
.k-lkuva .k-siivu { display:none; }
.k-ltxt { display:block; margin-top:2.4vh; }
.k-lnro { display:block; font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.k-llause { display:block; margin-top:1.2vh; font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(22px,1.9vw,30px); line-height:1.2; letter-spacing:-.01em; }
.k-lnimike { display:block; margin-top:1.4vh; font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); transition:color .4s ease; }
.k-lnimike .nuoli { margin-left:.6em; }
.k-liuska:hover .k-lnimike { color:var(--ink); }

/* the line masks are shared with the walk: they stay on the width alone */
@media (min-width:861px) {
  body.js:not(.static) .k-mask { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
  body.js:not(.static) .k-in { display:block; }
}
/* the house stage: also at least 600px tall (2026-10-01). On a phone held sideways the
   doors' lines hang under the strips and fell off the bottom of a 430px stage; short
   windows keep the still page. kumppaneille.js (houseMode) says the same. */
@media (min-width:861px) and (min-height:600px) {
  body.js:not(.static) .k-talo { height:340vh; }
  body.js:not(.static) .k-tlava { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper); }
  body.js:not(.static) .k-tavaus { position:absolute; inset:0; height:auto; background:none; padding:12vh 12vw 0;
    z-index:3; pointer-events:none; transition:opacity .7s ease, transform 1s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-tavaus.pois { opacity:0; transform:translateY(-3vh); }
  body.js:not(.static) .k-tavaus .kick .k-in, body.js:not(.static) .k-tavaus h1 .k-in { transform:translateY(112%);
    transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-tavaus h1 .k-in { transition-delay:.12s; }
  body.js:not(.static) .k-tavaus .k-vihje { position:absolute; left:12vw; bottom:7vh; font-family:var(--sans);
    font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); opacity:0;
    transition:opacity 1s ease 1.6s; }
  body.js:not(.static).k-valmis .k-tavaus .kick .k-in, body.js:not(.static).k-valmis .k-tavaus h1 .k-in { transform:none; }
  body.js:not(.static).k-valmis .k-tavaus .k-vihje { opacity:.8; }
  body.js:not(.static) .k-tmast .kick .k-in, body.js:not(.static) .k-tmast h2 .k-in, body.js:not(.static) .k-tmast p {
    transform:translateY(112%); transition:transform 1s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-tmast p { transform:translateY(1.6vh); opacity:0; transition:opacity .9s ease .35s, transform .9s cubic-bezier(.22,1,.36,1) .35s; }
  body.js:not(.static) .k-tmast h2 .k-in { transition-delay:.1s; }
  body.js:not(.static) .k-tmast.on .kick .k-in, body.js:not(.static) .k-tmast.on h1 .k-in, body.js:not(.static) .k-tmast.on h2 .k-in,
  body.js:not(.static) .k-tmast.on p { transform:none; opacity:1; }
  body.js:not(.static) .k-tmast { opacity:1 !important; }
  body.js:not(.static) .k-tmast { display:grid; position:absolute; left:12vw; right:12vw; top:14vh;
    grid-template-columns:1fr auto; align-items:start; gap:2vh 6vw; opacity:0; z-index:3; pointer-events:none; }
  body.js:not(.static) .k-tmast h2 { margin-top:2vh; font-family:var(--disp); font-size:clamp(28px,3.4vw,50px);
    font-weight:500; letter-spacing:-.025em; line-height:1.1; }
  body.js:not(.static) .k-tmast p { font-size:clamp(14.5px,1.2vw,17px); line-height:1.7; color:var(--faded);
    max-width:32ch; padding-top:2.4em; }
  body.js:not(.static) .k-liuskat { display:block; padding:0; }
  body.js:not(.static) .k-liuska { position:absolute; top:0; height:100vh; width:25vw; }
  body.js:not(.static) .k-liuska:nth-child(1) { left:0; }
  body.js:not(.static) .k-liuska:nth-child(2) { left:25vw; }
  body.js:not(.static) .k-liuska:nth-child(3) { left:50vw; }
  body.js:not(.static) .k-liuska:nth-child(4) { left:75vw; }
  body.js:not(.static) .k-lkuva { position:absolute; inset:0; aspect-ratio:auto; }
  body.js:not(.static) .k-lkuva .k-siivu { display:block; background-image:url(/img/grand-talo.jpg);
    background-size:400% auto; background-position:0 50%; }
  body.js:not(.static) .k-liuska:nth-child(2) .k-siivu { background-position:33.333% 50%; }
  body.js:not(.static) .k-liuska:nth-child(3) .k-siivu { background-position:66.667% 50%; }
  body.js:not(.static) .k-liuska:nth-child(4) .k-siivu { background-position:100% 50%; }
  body.js:not(.static) .k-lkuva .k-ovikuva { opacity:0; }
  body.js:not(.static) .k-ltxt { position:absolute; left:0; right:0; top:100%; margin-top:2.4vh; opacity:0;
    transform:translateY(2.4vh); transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-liuska.on .k-ltxt { opacity:1; transform:none; }
  body.js:not(.static) .k-liuska .p { transform:scale(0); transform-box:border-box; transform-origin:60% 60%; }
  body.js:not(.static) .k-liuska.on .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .55s forwards; }
  body.js:not(.static) .k-liuska { pointer-events:none; }
  body.js:not(.static) .k-liuska.on { pointer-events:auto; }
}
@media (max-width:860px) {
  .k-tavaus { height:64vh; }
  .k-liuskat { grid-template-columns:1fr; gap:7vh 0; }
  .k-lkuva { aspect-ratio:4/3; }
}

.k-vihje { display:none; }
.k-tavaus .kick { display:block; }
.k-tavaus h1 { max-width:12ch; font-size:clamp(32px,3.9vw,58px); }
.k-tavaus { background-position:10% 50%; }   /* the still page: the claim sits over the sky, not the wall */
@media (max-width:860px) { .k-tavaus { padding-top:13vh; } .k-tavaus h1 { font-size:30px; max-width:10ch; } }
.k-tavaus h1 .p, .k-tmast h2 .p { color:var(--sun); }
.k-tavaus h1 .p { color:var(--cream); }

/* ── the sections: A's pair, then the whole room ─────────────────────── */
.k-huone { position:relative; padding:19vh 12vw 5vh; }
.k-huone:last-of-type { padding-bottom:13vh; }
.k-hsis { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.72fr); gap:6vh 6vw; align-items:start; }
.k-bkick { font-family:var(--sans); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.k-blause { margin-top:3.2vh; font-family:"Newsreader",Georgia,serif; font-weight:300;
  font-size:clamp(32px,4.4vw,68px); line-height:1.06; letter-spacing:-.015em; }
.k-bvast { margin-top:3vh; font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.4vw,36px);
  letter-spacing:-.025em; line-height:1.15; }
.k-hteksti { margin-top:3vh; font-size:clamp(15.5px,1.35vw,18px); line-height:1.75; color:var(--faded); max-width:52ch; }
.k-bvast + .k-hteksti { margin-top:6vh; }
.k-hteksti a, .hfine a { color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--sun); }
.k-bprint { margin:0; width:100%; }
.k-bprint img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; }
.k-bprint figcaption { margin-top:12px; font-size:14px; color:var(--muted); line-height:1.6; }
.k-bprint figcaption b { display:block; font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faded); margin-bottom:3px; }
.k-hlisa .hf:first-of-type { margin-top:8vh; }
.k-hlisa .hkuva { margin-top:8vh; }

@media (min-width:861px) {
  body.js:not(.static) .k-huone .k-in { transform:translateY(112%); transition:transform 1.05s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-huone.on .k-in { transform:none; }
  body.js:not(.static) .k-huone.on .k-blause .k-in { transition-delay:.06s; }
  body.js:not(.static) .k-huone.on .k-bvast .k-in { transition-delay:.4s; }
  body.js:not(.static) .k-huone .p { transform:scale(0); transform-box:border-box; transform-origin:60% 60%; }
  body.js:not(.static) .k-huone.on .k-blause .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .8s forwards; }
  body.js:not(.static) .k-huone.on .k-bvast .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) 1.15s forwards; }
  body.js:not(.static) .k-bprint { opacity:0; transform:translateY(7vh); will-change:transform;
    transition:opacity 1s ease .3s; }
  body.js:not(.static) .k-bprint img { filter:sepia(.5) saturate(.55) contrast(.95) brightness(1.03); transition:filter 2.2s ease .7s; }
  body.js:not(.static) .k-huone.on .k-bprint { opacity:1; }
  body.js:not(.static) .k-huone.on .k-bprint img { filter:none; }
}
@media (max-width:860px) {
  .k-huone { padding:13vh 7vw 4vh; }
  .k-hsis { grid-template-columns:1fr; gap:4vh 0; }
  .k-bprint img { aspect-ratio:4/3; }
  .k-hlisa .hf:first-of-type { margin-top:5vh; }
}

/* ── perustiedot ─────────────────────────────────────────────────────── */
.k-perus { padding:20vh 12vw 10vh; }
.k-pmast { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr); gap:3vh 7vw; align-items:end; }
.k-pmast h2 { margin-top:2.5vh; font-family:var(--disp); font-size:clamp(30px,3.9vw,56px); font-weight:500;
  letter-spacing:-.025em; line-height:1.08; max-width:16ch; }
.k-pmast p { font-size:clamp(15.5px,1.35vw,18px); line-height:1.75; color:var(--faded); max-width:38ch; }
.k-arvot { margin-top:11vh; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5vh 5vw; }
.k-arvo h3 { font-family:var(--disp); font-size:clamp(19px,1.7vw,25px); font-weight:500; letter-spacing:-.02em; line-height:1.2; }
.k-arvo p { margin-top:1.8vh; font-size:clamp(15px,1.2vw,17px); line-height:1.7; color:var(--faded); max-width:32ch; }
.k-arvo .kick { color:var(--muted); }
.k-arvo h3 { margin-top:1.6vh; }
.k-ura { margin-top:14vh; }
.k-ura h3 { font-family:var(--disp); font-size:clamp(24px,2.6vw,38px); font-weight:500; letter-spacing:-.025em; }
.k-ura .luvut { margin-top:6vh; }
.k-ura .hfine { margin-top:5vh; }

/* ── prints in perustiedot: flat on the paper, developing on entry ──── */
.k-print { margin:0; }
.k-print img { width:100%; height:auto; display:block; }
.k-print figcaption { margin-top:12px; font-size:14px; color:var(--muted); line-height:1.6; }
.k-print figcaption b { display:block; font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faded); margin-bottom:3px; }
.js .k-print img { filter:sepia(.45) saturate(.6) contrast(.95) brightness(1.02); transition:filter 2.2s ease .3s; }
.js .k-print.on img, .static .k-print img { filter:none; }
.k-plevea { margin-top:12vh; }
.k-plevea img { aspect-ratio:2/1; object-fit:cover; }
/* the pair: two prints on the table, one hung lower, each on its own clock */
.k-ppari { margin-top:13vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:6vh 6vw; align-items:start; }
.k-ppari .k-print:nth-child(2) { margin-top:16vh; }
.k-ppari .k-print:nth-child(1) img { aspect-ratio:16/10; object-fit:cover; }
.k-ppari .k-print:nth-child(2) img { aspect-ratio:3/4; object-fit:cover; }
/* the sauna: the passage into the walk, opening past its own margins */
.k-psauna { margin:16vh 0 0; padding:0 12vw; }
.js .k-psauna { padding:0 var(--avaa, 12vw); transition:padding .1s linear; }
.k-psauna img { aspect-ratio:21/9; object-fit:cover; }
.k-psauna figcaption { padding:0; }
.js .k-psauna figcaption { padding:0 calc(12vw - var(--avaa, 12vw)); }
.k-perus { padding-bottom:0; }
@media (max-width:860px) {
  .k-plevea { margin-top:8vh; }
  .k-ppari { grid-template-columns:1fr; gap:6vh 0; margin-top:9vh; }
  .k-ppari .k-print:nth-child(2) { margin-top:0; }
  .k-psauna { margin-top:10vh; padding:0; }
  .k-psauna img { aspect-ratio:4/3; }
  .k-psauna figcaption { padding:0 7vw !important; }
}

/* ── the walk: A's card carrying the whole room ──────────────────────── */
.k-kavely { position:relative; }
.k-lava { position:relative; padding:14vh 12vw 4vh; }
.k-otsake { font-family:var(--sans); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sun); font-weight:500; }
.k-otsake span { color:var(--muted); margin-left:1.2em; }
.k-beat { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr); gap:5vh 6vw;
  align-items:start; padding:9vh 0 5vh; }
.k-beat .k-bkick { color:var(--muted); }
.k-beat .k-blause { font-size:clamp(28px,min(3.3vw,5.6vh),50px); line-height:1.08; margin-top:2.4vh; }
.k-beat .k-bvast { font-size:clamp(20px,min(2vw,3.4vh),30px); margin-top:2vh; }
.k-beat .k-bvast a { text-decoration:none; color:var(--ink); }
.k-bbody { margin-top:3vh; }
.k-bbody .k-hteksti { margin-top:1.8vh; font-size:clamp(14px,1.9vh,16.5px); line-height:1.65; max-width:60ch; }
.k-bbody .askeleet { margin-top:2vh; }
.k-bbody .askel { padding:.8vh 0; }
.k-bbody .hfine { margin-top:2vh; }
.k-bbody .ihmiset { margin-top:3.2vh; gap:3vh 4vw; flex-wrap:nowrap; }
.k-bbody .ihminen { flex:1 1 0; min-width:0; }
.k-bbody .ihminen .mika { letter-spacing:.14em; line-height:1.6; }
/* the room's numbers sit in the text column, a row under the prose */
.k-bbody .k-bfacts { margin-top:2.6vh; display:flex; gap:2vh 4.5vw; flex-wrap:wrap; }
.k-bbody .k-bfacts .hf { padding:0; }
.k-bbody .k-bfacts .hf .n { font-size:clamp(22px,1.9vw,28px); }
.k-bbody .k-bfacts .hf .l { margin-top:4px; font-size:13.5px; }
.k-bbody .k-bfacts .hf .s { display:none; }   /* the sub-lines repeat the prose and the caption */
/* one print per card, the same rectangle on every door */
.k-bside { width:100%; }
.k-bside .k-bprint { margin:0; }
.k-bside .k-bprint img { aspect-ratio:4/5; max-height:70vh; object-fit:cover; }
.k-bside .k-bprint figcaption { margin-top:10px; font-size:13px; }
.k-bside .k-bprint figcaption b { font-size:10px; }
.k-mittari { display:none; }
.k-kvihje { display:none; }
.k-ankkurit { display:none; }   /* the stage's parking anchors exist only on the pinned stage */

@media (min-width:1280px) and (min-height:700px), (min-width:1100px) and (min-height:800px), (min-width:861px) and (min-height:1000px) {
  /* the page parks on a card through native scroll snap: one anchor per card at its rest
     (0.6 viewports of scroll apart, the same BEAT as kumppaneille.js), proximity so nothing
     else on the page snaps, stop:always so a fling never passes a card. The nav's
     scroll-padding would shift every rest by its height, so it is zero here; the stage pins
     at top:0 and the meter, the doors and the keys all land through the script. */
  html { scroll-snap-type:y proximity; scroll-padding-top:0; }
  body.js:not(.static) .k-kavely { height:calc(100vh + 3 * 60vh); }   /* the last rest is the moment the stage lets go */
  body.js:not(.static) .k-ankkurit { display:block; position:absolute; inset:0; pointer-events:none; }
  body.js:not(.static) .k-ankkurit i { position:absolute; left:0; width:1px; height:100vh; scroll-snap-align:start; scroll-snap-stop:always; }
  body.js:not(.static) .k-ankkurit i:nth-child(2) { top:60vh; }
  body.js:not(.static) .k-ankkurit i:nth-child(3) { top:120vh; }
  body.js:not(.static) .k-ankkurit i:nth-child(4) { top:180vh; }
  body.js:not(.static) .k-lava { position:sticky; top:0; height:100vh; padding:0 12vw; overflow:hidden; }
  body.js:not(.static) .k-otsake { position:absolute; left:12vw; top:7.5vh; }
  body.js:not(.static) .k-beats { position:absolute; inset:0 12vw; }
  /* the card's body (opacity, translate, visibility) is written per frame by kumppaneille.js
     and follows the scroll, and a leaving card lifts away whole, its arrived parts kept until
     it is out of sight; only the parts inside transition, on arrival */
  body.js:not(.static) .k-beat { position:absolute; inset:0; padding:13vh 0 12vh; grid-template-rows:minmax(0,1fr);
    opacity:0; visibility:hidden; will-change:transform,opacity; }
  /* the print takes the whole column height, caption under it, so every card carries the same rectangle */
  body.js:not(.static) .k-bside { align-self:stretch; min-height:0; opacity:1; transform:none; transition:none; }
  /* the print flies in on its own (the drift is the separate translate property, written by the script) */
  body.js:not(.static) .k-bside .k-bprint { height:100%; display:flex; flex-direction:column; will-change:transform;
    opacity:0; transform:translateY(7vh); transition:opacity .9s ease .4s, transform 1.3s cubic-bezier(.22,1,.36,1) .4s; }
  body.js:not(.static) .k-beat.on .k-bside .k-bprint { opacity:1; transform:none; }
  body.js:not(.static) .k-beat.snap .k-bside .k-bprint { transition:none !important; }
  body.js:not(.static) .k-bside .k-bprint img { flex:1 1 auto; min-height:0; height:auto; max-height:none; aspect-ratio:auto; }
  body.js:not(.static) .k-bside .k-bprint figcaption { flex:none; }
  body.js:not(.static) .k-beat:not(.on) { pointer-events:none; }
  body.js:not(.static) .k-beat .k-in { transform:translateY(112%); transition:transform 1.05s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-beat.on .k-in { transform:none; }
  body.js:not(.static) .k-beat.on .k-blause .k-in { transition-delay:.05s; }
  body.js:not(.static) .k-beat.on .k-bvast .k-in { transition-delay:.25s; }
  /* the room's text fades in after the pair, paragraph by paragraph */
  body.js:not(.static) .k-beat .k-fade { opacity:0; transform:translateY(14px);
    transition:opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-beat.on .k-fade { opacity:1; transform:none; }
  body.js:not(.static) .k-beat.on .k-fade:nth-child(1) { transition-delay:.35s; }
  body.js:not(.static) .k-beat.on .k-fade:nth-child(2) { transition-delay:.42s; }
  body.js:not(.static) .k-beat.on .k-fade:nth-child(3) { transition-delay:.49s; }
  body.js:not(.static) .k-beat.on .k-fade:nth-child(4) { transition-delay:.56s; }
  body.js:not(.static) .k-beat.on .k-fade:nth-child(5) { transition-delay:.63s; }
  body.js:not(.static) .k-bside { opacity:0; transform:translateY(8vh);
    transition:opacity .9s ease, transform 1.3s cubic-bezier(.22,1,.36,1); }
  body.js:not(.static) .k-bside .k-bprint img { filter:sepia(.5) saturate(.55) contrast(.95) brightness(1.03); transition:filter 2s ease; }
  body.js:not(.static) .k-beat.on .k-bside { opacity:1; transform:none; transition-delay:.3s; }
  body.js:not(.static) .k-beat.on .k-bside .k-bprint img { filter:none; transition-delay:.6s; }
  body.js:not(.static) .k-beat .p { transform:scale(0); transform-box:border-box; transform-origin:60% 60%; }
  body.js:not(.static) .k-beat.on .k-blause .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .8s forwards; }
  body.js:not(.static) .k-beat.on .k-bvast .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) 1.15s forwards; }
  body.js:not(.static) .k-beat.snap .k-in, body.js:not(.static) .k-beat.snap .k-bside,
  body.js:not(.static) .k-beat.snap .k-fade { transition:none !important; }
  body.js:not(.static) .k-mittari { display:flex; gap:2.2em; position:absolute; left:12vw; bottom:6vh;
    list-style:none; margin:0; padding:0; }
  body.js:not(.static) .k-mittari button { font:500 11.5px/1 var(--sans); letter-spacing:.2em; color:var(--himmea);
    background:none; border:0; padding:6px 0; cursor:pointer; transition:color .5s ease; font-variant-numeric:tabular-nums; }
  body.js:not(.static) .k-mittari button.on { color:var(--ink); }
  body.js:not(.static) .k-kvihje { display:block; position:absolute; right:12vw; bottom:6vh; font-family:var(--sans);
    font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); transition:opacity .6s ease; }
  body.js:not(.static) .k-kavely.k-loppu .k-kvihje { opacity:0; }
}
@media (max-width:1100px) {
  .k-arvot { grid-template-columns:1fr; gap:5vh 0; }
}
@media (max-width:860px) {
  .k-perus { padding:14vh 7vw 8vh; }
  .k-pmast { grid-template-columns:1fr; }
  .k-lava { padding:10vh 7vw 3vh; }
  .k-beat { grid-template-columns:1fr; gap:4vh 0; padding:7vh 0 2vh; }
  .k-bside .k-bprint img { aspect-ratio:4/3; max-height:none; }
  .k-bbody .k-bfacts { gap:2vh 8vw; }
  .k-bbody .ihmiset { flex-wrap:wrap; }
  .k-bbody .ihminen { flex:0 1 auto; }
}


/* A direct route is visible while the house performs its opening. */
.k-quick { display:grid; grid-template-columns:max-content max-content; gap:0 24px; color:var(--cream); max-width:42ch; }
.k-quick a { pointer-events:auto; text-decoration-color:rgba(242,236,221,.55); }
.k-tavaus.pois .k-quick { visibility:hidden; }
.k-otsake { color:var(--faded); }
.k-bkick, .k-lnro, .k-lnimike, .ihminen .mika { font-size:12px; letter-spacing:.14em; }
.k-bbody .k-hteksti { font-size:clamp(16px,1.9vh,17px); }

@media (min-width:861px) and (min-height:700px) and (max-height:860px) {
  .k-bbody .askel { grid-template-columns:36px 1fr; column-gap:18px; padding:.5vh 0; }
  .k-bbody .askeleet { margin-top:1.5vh; }
  .k-bbody .ihmiset { margin-top:2vh; }
  .k-bbody .hfine { margin-top:1.5vh; }
}

/* On the pinned stage a wide, short window grew the landowner's card (the steps' numerals,
   their lines and the name follow the width) while the stage did not: at 1536x700 the phone
   number touched the meter. The same sizes, capped by the height. Unchanged from 900px up. */
@media (min-width:1280px) and (min-height:700px), (min-width:1100px) and (min-height:800px), (min-width:861px) and (min-height:1000px) {
  body.js:not(.static) .k-bbody .askel .no { font-size:clamp(23px,min(2.1vw,3.6vh),32px); }
  body.js:not(.static) .k-bbody .askel p { font-size:clamp(15.5px,min(1.3vw,2.2vh),17.5px); }
  body.js:not(.static) .k-bbody .ihminen .kuka { font-size:clamp(18px,min(1.5vw,2.6vh),21px); }
}