/* ═══════════════════════════════════════════════════════════════════════
   NORDEVO — Kohteemme. The archive reads from finished to unfinished:
   Grand opens as the finished photograph (head above, one wide b/w print
   below) that scroll opens past its own edges into the whole morning in
   color; Jula is carried by its number until photos exist; the stadium
   chapter cuts to spruce. Loaded after nordevo.css + alasivu.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── kulku: the head is a walk (white-desert camps pattern in Paperivalo).
   Layers inside one sticky viewport, back to front:
     .kseina  z1  the lit morning wall; walks at 0.15× track speed, so the
                  plates ride above it (width is JS-set to cover the drift)
     .khero   z2  the white-kitchen hero; wipes away in three strips
                  (rightmost first — the white-desert clip reveal)
     .krata   z3  the sideways track: paper head + three kohde plates + the
                  flight panel that arrives as a still and plays on landing
     .kpaatos z4  "Aloitetaan valmiista." lit at the end
   Section height + every transform are set per frame in kohteemme.js
   (kFrame); ≤860px, no-js and .static print the stack instead. ── */
.kulku { position:relative; z-index:3; background:var(--paper); }
.kulku .kpin { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper); }

.kseina { position:absolute; inset:0; z-index:1; }
.kseina img { width:100%; height:100%; object-fit:cover; }

/* the flight: a DISTANT layer, under the plates and over the still wall.
   It slides in from the right on its own clock at 0.55x the track's speed
   (kFrame), so it reads as far away: the cards pass it, and it is still
   arriving after they have gone. Plays only once landed. */
.kpohja { position:absolute; inset:0; z-index:2; overflow:hidden;
  will-change:transform; }
.kpohja video { width:100%; height:100%; object-fit:cover; }

/* hero strips: each shows its third of the same full-bleed frame and crops
   from its right edge (clip-path), so the wall appears in three sweeps */
.khero { position:absolute; inset:0; z-index:3; }
.hsiivu { position:absolute; top:0; bottom:0; left:calc(var(--i)*33.331%); width:33.6%;
  overflow:hidden; will-change:clip-path; }
.hsiivu img { position:absolute; top:0; left:calc(var(--i)*-33.331vw); width:100vw;
  height:100%; object-fit:cover; }

.krata { position:absolute; top:0; left:0; height:100%; width:max-content; z-index:4;
  display:flex; align-items:stretch; will-change:transform; }
.kintro { flex:0 0 auto; width:58vw; background:var(--paper);
  padding:21vh 5vw 6vh 10vw; }
.kintro h1 { margin-top:2.5vh; font-family:var(--disp); font-size:clamp(27px,3.15vw,46px);
  font-weight:500; letter-spacing:-.025em; line-height:1.14; max-width:26ch; }
/* the claim's period stamps sun, static: the head is on screen at first
   paint, so no reveal clock (the walk's closing line keeps the lit .pp) */
.kintro h1 .liitos { white-space:nowrap; }
.kintro h1 .p { color:var(--sun); }
.kintro .intro { margin-top:3.5vh; font-size:clamp(15.5px,1.35vw,18px); line-height:1.75;
  color:var(--faded); max-width:54ch; }

/* plates: flat print + paper label slip, no frames, no shadows; sizes and
   ride heights alternate like the tyomaat walk so the wall keeps breathing */
.klevy { flex:0 0 auto; align-self:center; text-decoration:none; color:var(--ink);
  will-change:transform; }
.klevy { width:min(40vw,620px); }
.klevy:nth-of-type(1) { margin-left:49vw; }
.klevy:nth-of-type(2) { margin-left:9vw; transform:translateY(-5vh); }
.klevy:nth-of-type(3) { margin-left:10vw; transform:translateY(3vh); }
.kkuva { display:block; aspect-ratio:4/3; overflow:hidden; }
.kkuva img { width:100%; height:100%; object-fit:cover; will-change:filter;
  filter:sepia(.45) saturate(.6) contrast(.95) brightness(1.02); }
.klappu { display:block; background:var(--paper); padding:15px 18px 18px; }
/* ?glass=1 comparison: frosted-glass label slip instead of solid paper.
   Shine = a diagonal specular gradient in the pane itself + a bright top
   edge glint (inset hairlines, not a drop shadow) + a soft streak overlay. */
.lasi .klappu { position:relative;
  background:linear-gradient(115deg,
    rgba(255,255,255,.52), rgba(255,255,255,.18) 38%,
    rgba(249,245,236,.26) 62%, rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(20px) saturate(1.45) brightness(1.06);
  backdrop-filter:blur(20px) saturate(1.45) brightness(1.06);
  border:1px solid rgba(255,255,255,.5); border-top-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 1px 0 0 rgba(255,255,255,.28); }
.lasi .klappu::after { content:""; position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 32%,
    rgba(255,255,255,.30) 44%, rgba(255,255,255,.05) 52%,
    transparent 60%); }
.lasi .klappu > * { position:relative; z-index:1; }
.ktila { display:block; font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.ktila .nyt { color:var(--sun); }
.knimi { display:block; margin-top:9px; font-family:var(--disp); font-size:clamp(19px,1.8vw,25px);
  font-weight:600; letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 88%/0 1px;
  transition:background-size .5s cubic-bezier(.22,1,.36,1); width:fit-content; }
.klevy:hover .knimi, .klevy:focus-visible .knimi { background-size:100% 1px; }
.kseloste { display:block; margin-top:7px; font-size:15.5px; line-height:1.65;
  color:var(--faded); }

/* the closing line on the flight */
.kpaatos { position:absolute; z-index:5; left:8vw; bottom:11vh; margin:0;
  opacity:0; transform:translateY(16px); pointer-events:none; color:var(--cream); }
.kpaatos span { display:block; font-family:var(--disp); font-weight:500;
  font-size:clamp(29px,3.6vw,51px); letter-spacing:-.025em; line-height:1.14; }
.kpaatos .pp { font-style:normal; color:var(--sun); }
.kpaatos small { display:block; margin-top:13px; font-family:var(--sans); font-size:12px;
  letter-spacing:.06em; color:rgba(242,236,221,.66); }

/* ── chapter heads (jula + stadion carry theirs inside the chapter) ── */
.kotsikko { margin-top:2.2vh; font-family:var(--disp); font-size:clamp(29px,3.6vw,51px);
  font-weight:500; letter-spacing:-.025em; line-height:1.14; }

/* ── the opening: the finished photograph. At rest the pin is one composed
   page: chapter head top-left, a wide b/w print below it (about 2/5 of the
   viewport, edges on the 12vw text grid — wide enough to read as the whole
   image), a gallery label under the print. Scroll opens the print past its
   own edges into the whole morning, in color. The rest insets here MUST
   match REST in kohteemme.js (the JS lerps them to zero).
   nordevo.css's front-page #grand cinema leaks onto this id through the
   shared sheet (dark bg, cream, and overflow:hidden — which would kill the
   sticky pin): re-assert paper + overflow (id+class outweighs the id). ── */
.avaus { position:relative; z-index:3; height:270vh; background:var(--paper); }
#grand.avaus { background:var(--paper); color:var(--ink); overflow:visible; }
#grand.avaus .kick { color:var(--sun); }
/* head + label live UNDER the print (z1 < klip z2): the opening edges
   sweep over whatever the fade has left of them */
.avaus .ots { position:absolute; z-index:1; left:12vw; top:15vh;
  will-change:opacity,transform; }
.avaus .pin { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper); }
.avaus .klip { position:absolute; inset:0; z-index:2;
  clip-path:inset(36% 12% 18% 12%); -webkit-clip-path:inset(36% 12% 18% 12%);
  will-change:clip-path; }
/* object-position biases toward the window on narrow viewports; the rest
   translateX slides the window light into the band's right edge on wide
   ones (cover doesn't crop horizontally there, so object-position can't) */
.avaus .klip img { width:100%; height:100%; object-fit:cover; object-position:66% 50%;
  transform:translateX(-7%) scale(1.12); filter:grayscale(1) sepia(.12) contrast(.97);
  will-change:transform,filter; }
/* gallery label under the print, on its left edge */
.avaus .neg { position:absolute; z-index:1; left:12vw;
  top:calc(82% + 16px); font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
/* the payoff line takes the head's place on the open morning */
.avaus .huomio { position:absolute; z-index:3; left:12vw; top:15vh; width:min(560px,78vw);
  opacity:0; transform:translateY(14px); pointer-events:none; }
.avaus .huomio h3 { font-family:var(--disp); font-size:clamp(27px,3.2vw,46px); font-weight:500;
  line-height:1.16; letter-spacing:-.025em; color:#191510; }
.avaus .huomio p { margin-top:14px; font-size:clamp(14px,1.25vw,16.5px); line-height:1.6; color:#2e2718; }

/* ── kohde chapters ── */
.kohde { padding:12vh 12vw 6vh; }
/* the filing line: each chapter's text block opens signed (the avaus keeps
   the poster name; this is the bookkeeping scale, clearly below it — the
   front-page receipt pattern, 2026-09-01: Grand's tarina and tiedot must
   read as Grand's before Jula's head arrives) */
.animi { margin-top:2vh; font-family:var(--disp); font-size:clamp(24px,2.6vw,42px);
  font-weight:500; letter-spacing:-.03em; line-height:1.05; }
.animi .liitos { white-space:nowrap; }
.animi .p { display:inline-block; transform:scale(0); transform-box:border-box;
  transform-origin:60% 60%; color:var(--sun); }
.animi.on .p, .pera.on .animi .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .55s forwards; }
.kwrap { display:grid; grid-template-columns:1.04fr .96fr; gap:6vw; align-items:start; }
.kohde .kwrap { margin-top:5.5vh; }
.jula .kwrap, .vihrea .tarina { margin-top:6vh; }
.tarina p { font-size:clamp(15.5px,1.35vw,18px); line-height:1.78; color:#3c3424; max-width:56ch; }
.tarina p + p { margin-top:2.6vh; }
.tarina .fine { max-width:56ch; }
.myynti { margin-top:3.4vh; font-size:clamp(15.5px,1.35vw,18px); color:var(--faded); }
/* one verbatim quote per chapter: the client's own words, italic, with
   the gallery-label attribution under it */
.tarina .lainaus { margin-top:3.6vh; font-style:italic; color:var(--ink); }
.tarina .lainaus .lkuka { display:block; margin-top:1.4vh; font-family:var(--sans);
  font-style:normal; font-weight:500; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); }
.vihrea .tarina .lainaus { color:var(--cream); }
.vihrea .tarina .lainaus .lkuka { color:rgba(242,236,221,.5); }
.kohde a, .vihrea .tarina a, .tiedot a { color:inherit; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--sun); }
.kohde .tarina a, .myynti a { color:var(--ink); }

/* facts table — hairline archival rows. nordevo.css has since grown a bare
   .tiedot receipt grid for the front page's rooms (three .tieto cards in a
   row); it leaks through the shared sheet and smashes these rows into three
   overlapping columns — re-assert the archival grammar (this sheet loads
   last, so equal specificity wins) */
.tiedot { display:block; margin-top:0; border-top:1px solid rgba(34,28,18,.16); }
.tiedot > div { display:grid; grid-template-columns:108px 1fr; gap:18px; padding:13px 0;
  border-bottom:1px solid rgba(34,28,18,.08); }
.tiedot dt { font-family:var(--sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding-top:4px; }
.tiedot dd { font-size:15px; line-height:1.55; color:var(--faded); }

/* two-up photo pair */
.kaksio { display:grid; grid-template-columns:1fr 1fr; gap:4vw; padding:9vh 0 12vh; }
.kaksio .plate { margin:0; }
.kaksio .plate figcaption span, .vihrea .plate figcaption span {
  font-family:var(--sans); font-size:13px; letter-spacing:.05em; color:var(--muted); max-width:none; }

/* ── Jula: the number carries the picture ── */
.jula { padding:14vh 12vw 12vh; }
.iso { font-family:var(--disp); font-size:clamp(61px,8.6vw,133px); font-weight:400;
  letter-spacing:-.035em; line-height:1; }
.iso .yks { font-size:.46em; letter-spacing:-.01em; }
.iso .pot { font-size:.6em; vertical-align:.8em; line-height:0; margin-left:.02em; }
.isoL { margin-top:1.4vh; font-size:clamp(17px,1.5vw,21px); line-height:1.4; color:var(--ink); }
.julaN .tiedot { margin-top:5.5vh; }
.jula .fine { margin-top:5vh; }

/* ── stadium: the spruce chapter ── */
.vihrea { position:relative; z-index:3; background:var(--spruce); color:var(--cream); }
.vihrea .wrap { display:grid; grid-template-columns:1.02fr .98fr; gap:6vw;
  padding:15vh 10vw 14vh; align-items:start; }
.vihrea .kick { color:var(--amber); }
.vihrea .kotsikko { color:var(--cream); }
.vihrea .tarina p { color:rgba(242,236,221,.75); }
.vihrea .tarina a { color:var(--cream); }
.vihrea .tiedot { margin-top:5.5vh; border-top-color:rgba(242,236,221,.18); }
.vihrea .tiedot > div { border-bottom-color:rgba(242,236,221,.09); }
.vihrea .tiedot dt { color:rgba(242,236,221,.45); }
.vihrea .tiedot dd { color:rgba(242,236,221,.75); }
.vihrea .tiedot a { color:rgba(242,236,221,.9); }
.vihrea .plate { margin:0; }
.vihrea .plate figcaption span { color:rgba(242,236,221,.55); max-width:44ch; }
.vihrea .kside { position:sticky; top:10vh; }

/* ── Pöydällä: the drawing-table register, places before they are
   chapters. Type and air only — the page's one ruled register stays the
   tiedot tables. Names reuse the .animi filing scale so the page keeps a
   single filing-name system. ── */
.poyta { padding:15vh 12vw 17vh; }
.pjohto { margin-top:2.6vh; font-size:clamp(15.5px,1.35vw,18px); line-height:1.78;
  color:var(--faded); max-width:56ch; }
.plista { margin-top:8vh; }
.pera + .pera { margin-top:6.5vh; }
.pera .animi { margin-top:0; }
.pera p { margin-top:1.4vh; font-size:clamp(15px,1.3vw,17px); line-height:1.7;
  color:var(--faded); max-width:52ch; }

/* ── responsive: the walk prints as a stack ── */
@media (max-width:860px) {
  .kulku { height:auto !important; }
  .kulku .kpin { position:relative; height:auto; overflow:visible; }
  .kseina { display:none; }
  /* the hero prints once, as a full-width plate under the intro */
  .khero { position:relative; inset:auto; aspect-ratio:4/3; margin:0 0 7vh; }
  .hsiivu { display:none; }
  .hsiivu:first-child { display:block; position:absolute; inset:0; left:0; width:100%;
    clip-path:none !important; -webkit-clip-path:none !important; }
  .hsiivu:first-child img { position:absolute; inset:0; left:0 !important; width:100%; }
  .krata { position:relative; height:auto; width:auto; display:block; transform:none !important; }
  .kintro { width:auto; padding:8vh 7vw 5vh; }
  .klevy { display:block; transform:none !important; }
  .klevy:nth-of-type(n) { width:auto; margin:0 7vw 7vh; }
  .kkuva img { filter:none !important; }
  .klappu { padding:14px 0 0; }
  .kpohja { position:relative; inset:auto; aspect-ratio:16/9;
    transform:none !important; }
  .kpaatos { position:relative; left:auto; bottom:auto; opacity:1; transform:none;
    color:var(--ink); padding:4vh 7vw 5vh; pointer-events:auto;
    --sun:var(--oranssi); }   /* on paper in the stack: the period is the paper's accent, not the dark room's mint */
  .kpaatos small { color:var(--muted); }
  .kohde { padding:9vh 7vw 4vh; }
  .jula { padding:12vh 7vw 10vh; }
  .kwrap { grid-template-columns:1fr; gap:6vh; }
  .avaus { height:230vh; }
  .avaus .ots { left:7vw; right:7vw; top:12vh; }
  .avaus .klip { clip-path:inset(40% 0 22% 0); -webkit-clip-path:inset(40% 0 22% 0); }
  .avaus .klip img { transform:translateX(0) scale(1.10); }
  .avaus .neg { left:7vw; top:calc(78% + 14px); }
  .avaus .huomio { left:7vw; top:12vh; width:82vw; }
  .kaksio { grid-template-columns:1fr; gap:6vh; padding:7vh 0 9vh; }
  .vihrea .wrap { grid-template-columns:1fr; padding:12vh 7vw 11vh; gap:6vh; }
  .vihrea .kside { position:relative; top:0; }
  .poyta { padding:12vh 7vw 13vh; }
  .plista { margin-top:6vh; }
  .pera + .pera { margin-top:5.5vh; }
}

/* ── no-js / reduced motion: the walk is printed as a stack, in color ── */
.no-js .kulku, .static .kulku { height:auto !important; }
.no-js .kulku .kpin, .static .kulku .kpin { position:relative; height:auto; overflow:visible; }
.no-js .kseina, .static .kseina { display:none; }
.no-js .khero, .static .khero { position:relative; inset:auto; aspect-ratio:21/9; margin:0 0 8vh; }
.no-js .hsiivu, .static .hsiivu { display:none; }
.no-js .hsiivu:first-child, .static .hsiivu:first-child { display:block; position:absolute;
  inset:0; left:0; width:100%; clip-path:none !important; -webkit-clip-path:none !important; }
.no-js .hsiivu:first-child img, .static .hsiivu:first-child img { position:absolute; inset:0;
  left:0 !important; width:100%; }
.no-js .krata, .static .krata { position:relative; height:auto; width:auto; display:block;
  transform:none !important; }
.no-js .kintro, .static .kintro { width:auto; padding:9vh 12vw 5vh; }
.no-js .klevy, .static .klevy { display:block; transform:none !important;
  width:min(52vw,760px); margin:0 12vw 7vh; }
.no-js .kkuva img, .static .kkuva img { filter:none !important; }
.no-js .klappu, .static .klappu { padding:14px 0 0; }
.no-js .kpohja, .static .kpohja { position:relative; inset:auto; margin:0 12vw 6vh;
  aspect-ratio:16/9; transform:none !important; }
.no-js .kpaatos, .static .kpaatos { position:relative; left:auto; bottom:auto; opacity:1;
  transform:none; color:var(--ink); padding:0 12vw 5vh; pointer-events:auto; --sun:var(--oranssi); }
.no-js .kpaatos small, .static .kpaatos small { color:var(--muted); }

/* ── no-js / reduced motion: head printed in flow, the morning open, in color ── */
.no-js .avaus, .static .avaus { height:auto; }
.no-js .avaus .pin, .static .avaus .pin { position:relative; height:auto; overflow:visible; }
.no-js .avaus .ots, .static .avaus .ots { position:relative; left:auto; top:auto;
  padding:10vh 12vw 6vh; opacity:1 !important; transform:none !important; }
.no-js .avaus .klip, .static .avaus .klip { position:relative; inset:auto;
  clip-path:none !important; -webkit-clip-path:none !important; }
.no-js .avaus .klip img, .static .avaus .klip img { height:auto; transform:none; filter:none; }
.no-js .avaus .neg, .static .avaus .neg { display:none; }
.no-js .avaus .huomio, .static .avaus .huomio { position:relative; left:auto; top:auto;
  opacity:1; transform:none; padding:5vh 12vw 2vh; width:auto; }

.ktila, .tiedot dt { font-size:12px; letter-spacing:.12em; }
.ktila .nyt, #grand.avaus .kick { color:var(--faded); }

/* On phones the title leads. The desktop strips and horizontal travel
   keep their original geometry; display:contents only changes the stack. */
@media (max-width:860px) {
  .kulku .kpin { display:flex; flex-direction:column; }
  .kulku .krata { display:contents; }
  .kulku .kintro { order:0; width:100%; padding:14vh 7vw 6vh; }
  .kulku .khero { order:1; width:100%; flex:none; }
  .kulku .klevy:nth-of-type(n) { order:2; align-self:stretch; width:auto; margin:0 7vw 7vh; }
  .kulku .kpohja { order:3; flex:none; }
  .kulku .kpaatos { order:4; }
}