/* ────────────────────────────────────────────────────────────────────
   YLÄ · the row at the top of every page but the front page (which carries its own copy, with the button
   that travels up from the hero). yla.js writes the row; this file dresses it.
   ──────────────────────────────────────────────────────────────────── */
:root{--ruoste:#9a4a22}                        /* the house on the map */
/* ── one row of navigation, on a cloud (the front page's own) ────
   The pages on the left in the serif italic, the wordmark in the middle; on the right the date of the next showing
   and the invitation. All of it in full ink and large enough to read at a glance; a name pales only under the
   pointer. The page one is on is the name the pen has drawn a loop round, as round a date in a calendar: the thin
   stroke of the loop in the front page's hero, drawn as the page opens (lenkki.js writes it to the name's size). */
.yla{position:fixed; z-index:50; left:0; right:0; top:0; height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,var(--m)); pointer-events:none; color:var(--petrol)}
.yla > *{pointer-events:auto}
.yla nav{display:flex; align-items:center; gap:30px; padding-top:1px; font-family:var(--antiikva); font-style:italic; font-size:23px; line-height:1; white-space:nowrap}
.yla nav a{position:relative; padding:12px 0; transition:opacity .35s}
.yla nav a:hover{opacity:.62}
.yla nav a:not([href]){cursor:default; opacity:1}                                      /* a name whose page is not made yet */
.lenkki{position:absolute; left:-16px; top:50%; width:calc(100% + 32px); max-width:none; height:44px; margin-top:-20px; overflow:visible; pointer-events:none}
.lenkki path{fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-dasharray:1 1.1; stroke-dashoffset:1.05; transition:stroke-dashoffset .45s cubic-bezier(.4,0,.2,1)}
.yla nav a[aria-current] .lenkki path{stroke-dashoffset:0; transition-duration:.9s}
.yla nav a[aria-current="page"] .lenkki path{animation:lenkki-piirtyy .9s .5s cubic-bezier(.4,0,.2,1) backwards}
@keyframes lenkki-piirtyy{from{stroke-dashoffset:1.05}}
.yla-oik{display:flex; align-items:center; gap:30px; margin-left:auto}
.merkki{position:absolute; left:50%; top:50%; width:236px; transform:translate(-50%,-50%)}
.merkki img{width:100%; height:auto}
#kutsun-paikka{display:flex; align-items:center; gap:.5em; height:40px; font-family:var(--antiikva); font-style:italic; font-size:23px; line-height:1; white-space:nowrap}
#kutsun-paikka .veto{--d:1.3em; --sw:1.25}                     /* the pen's ring and arrow in one line, as on the front page (veto.css, veto.js) */
.paiva{font-variant-numeric:lining-nums}
.paiva em{font-style:inherit}
@media (max-width:1200px){ .paiva em{display:none} }                /* with Grand-etu beside it the date alone, or the right side meets the wordmark */
/* the cloud: six bands of blur, each stronger than the one under it, and over them a mist of paper that hangs a little
   lower in a few places and drifts very slowly. (No mask or opacity on .pilvi itself: a blur sees the page only
   through parents that have neither.) */
.pilvi{position:fixed; z-index:49; left:0; right:0; top:0; height:176px; overflow:hidden; pointer-events:none}
.pilvi i{position:absolute; inset:0}
.pilvi i:nth-child(1){-webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); -webkit-mask-image:linear-gradient(to top,transparent 4%,#000 22%,#000 34%,transparent 52%); mask-image:linear-gradient(to top,transparent 4%,#000 22%,#000 34%,transparent 52%)}
.pilvi i:nth-child(2){-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); -webkit-mask-image:linear-gradient(to top,transparent 18%,#000 36%,#000 48%,transparent 64%); mask-image:linear-gradient(to top,transparent 18%,#000 36%,#000 48%,transparent 64%)}
.pilvi i:nth-child(3){-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); -webkit-mask-image:linear-gradient(to top,transparent 32%,#000 50%,#000 60%,transparent 76%); mask-image:linear-gradient(to top,transparent 32%,#000 50%,#000 60%,transparent 76%)}
.pilvi i:nth-child(4){-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(to top,transparent 46%,#000 64%); mask-image:linear-gradient(to top,transparent 46%,#000 64%)}
.pilvi i:nth-child(5){-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); -webkit-mask-image:linear-gradient(to top,transparent 58%,#000 78%); mask-image:linear-gradient(to top,transparent 58%,#000 78%)}
.pilvi i:nth-child(6){-webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); -webkit-mask-image:linear-gradient(to top,transparent 70%,#000 92%); mask-image:linear-gradient(to top,transparent 70%,#000 92%)}
.pilvi b{--p:239,237,235; position:absolute; left:-6%; right:-6%; top:0; bottom:0; animation:pilvi-ajelehtii 70s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse 19% 104% at 10% 0,rgba(var(--p),.66),rgba(var(--p),.4) 44%,rgba(var(--p),0)),
    radial-gradient(ellipse 15% 78% at 31% 0,rgba(var(--p),.5),rgba(var(--p),.26) 44%,rgba(var(--p),0)),
    radial-gradient(ellipse 21% 96% at 52% 0,rgba(var(--p),.64),rgba(var(--p),.36) 44%,rgba(var(--p),0)),
    radial-gradient(ellipse 14% 74% at 71% 0,rgba(var(--p),.5),rgba(var(--p),.24) 44%,rgba(var(--p),0)),
    radial-gradient(ellipse 22% 108% at 91% 0,rgba(var(--p),.66),rgba(var(--p),.4) 44%,rgba(var(--p),0)),
    linear-gradient(rgba(var(--p),.97),rgba(var(--p),.93) 28%,rgba(var(--p),.62) 44%,rgba(var(--p),.22) 60%,rgba(var(--p),0) 76%)}
@keyframes pilvi-ajelehtii{from{transform:translateX(-3.5%)} to{transform:translateX(3.5%)}}

/* ── a narrower window: the row at the top is two lines, the wordmark and the invitation over the pages.
      The second line steps aside while the page is going down and comes back when it turns up. ── */
@media (max-width:1040px){
  .yla{display:grid; grid-template-columns:1fr auto; grid-template-rows:56px 38px; align-items:center; height:auto; padding:0 16px}
  .merkki{position:static; grid-area:1/1; width:172px; transform:none}
  .yla-oik{display:contents}
  #kutsun-paikka{grid-area:1/2}
  .yla > nav,.yla-oik nav{grid-row:2; align-self:start; gap:20px; font-size:min(20px,5.4vw); transition:opacity .3s, transform .45s cubic-bezier(.2,.7,.2,1)}
  .yla > nav{grid-column:1/-1; justify-self:start}                /* the second line is as wide as the window, whatever the widths of the first */
  .yla-oik nav{grid-column:1/-1; justify-self:end}
  .yla nav a{padding:8px 0}
  .yla nav a:not([href]){display:none}                            /* a name with no page yet steps aside: four names and the date do not fit one line */
  .yla nav a.kapea-pois{display:none}                             /* so Sijoittajalle steps aside too, and on its own page Grand-etu (yla.js) */
  .lenkki{left:-12px; width:calc(100% + 24px); height:37px; margin-top:-17px}
  .paiva em{display:none}
  .paiva[aria-current]{margin-right:10px}                         /* room for the loop between the date and the window's edge */
  .pilvi{height:168px; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .alas .yla nav{opacity:0; transform:translateY(-14px); pointer-events:none}
  .alas .pilvi{transform:translateY(-52px)}
}

/* on a phone the pages are behind two strokes of the pen at the start of the row; open, the pen crosses them out.
   The cloud then comes down over the whole screen: the page goes out of focus under a mist of paper whose lower edge
   is the uneven one of the row's cloud, and the names stand on it large, the page one is on in the pen's loop.
   The same as on the front page. */
.avaa{display:none; position:relative; width:46px; height:46px; padding:0; border:0; background:none; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
.avaa svg{position:absolute; left:11px; top:16px; width:25px; height:14px; overflow:visible}
.avaa path{fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:1 1.1; stroke-dashoffset:0; transition:stroke-dashoffset .28s cubic-bezier(.4,0,.2,1) .3s}
.avaa .viiva + .viiva{transition-delay:.42s}
.avaa .risti{stroke-dashoffset:1.05; transition-delay:0s}
.sivut-auki .avaa .viiva{stroke-dashoffset:1.05; transition-delay:0s}
.sivut-auki .avaa .risti{stroke-dashoffset:0; transition-delay:.26s}
.sivut-auki .avaa .risti + .risti{transition-delay:.44s}
.kansi{--p:239,237,235; position:fixed; z-index:50; left:0; right:0; top:0; height:calc(100lvh + 34vh); visibility:hidden; transform:translateY(-100%); transition:transform .8s cubic-bezier(.65,0,.25,1), visibility 0s .8s;
  -webkit-backdrop-filter:blur(18px) saturate(.8); backdrop-filter:blur(18px) saturate(.8);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 34vh), rgba(0,0,0,.5) calc(100% - 22vh), transparent); mask-image:linear-gradient(#000 calc(100% - 34vh), rgba(0,0,0,.5) calc(100% - 22vh), transparent);
  background:
    radial-gradient(ellipse 34% 15vh at 12% calc(100% - 30vh),rgba(var(--p),.7),rgba(var(--p),0)),
    radial-gradient(ellipse 26% 11vh at 44% calc(100% - 32vh),rgba(var(--p),.55),rgba(var(--p),0)),
    radial-gradient(ellipse 36% 16vh at 82% calc(100% - 29vh),rgba(var(--p),.7),rgba(var(--p),0)),
    linear-gradient(rgba(var(--p),.84),rgba(var(--p),.7) 40%,rgba(var(--p),.76) calc(100% - 34vh),rgba(var(--p),0) calc(100% - 12vh))}
.sivut-auki{overflow:hidden}
.sivut-auki .kansi{visibility:visible; transform:none; transition:transform .8s cubic-bezier(.65,0,.25,1)}
.sivut-auki .yla{z-index:51}

@media (max-width:760px){
  #kutsun-paikka{font-size:20px}                                  /* the invitation as in the front page's phone row */
  .yla{grid-template-columns:auto 1fr auto; grid-template-rows:56px; padding:0 14px 0 6px}
  .avaa{display:block; grid-area:1/1}
  .merkki{grid-area:1/2; justify-self:start; width:146px}
  #kutsun-paikka{grid-area:1/3}
  .yla > nav,.yla-oik nav{position:fixed; left:24px; display:flex; flex-direction:column; align-items:flex-start; gap:0; font-size:40px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s, transform .5s cubic-bezier(.2,.7,.2,1), visibility 0s .5s}
  .yla > nav{top:calc(15svh + 40px)}
  .yla-oik nav{top:calc(15svh + 40px + 3 * 62px + 34px)}
  .yla nav a{padding:11px 0}
  .yla nav a.kapea-pois{display:block}                            /* on the cloud there is room for every name */
  .yla .paiva em{display:inline}
  .paiva[aria-current]{margin-right:0}
  .lenkki{left:-18px; width:calc(100% + 36px); height:68px; margin-top:-32px}
  .alas .yla nav{transform:translateY(-10px)}
  .sivut-auki .yla > nav,.sivut-auki .yla-oik nav{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .5s .5s, transform .7s .5s cubic-bezier(.2,.7,.2,1)}   /* when the cloud has gone past them */
  .sivut-auki .yla-oik nav{transition-delay:.6s}
  .pilvi{height:132px}
  .alas .pilvi{transform:none}
}

@media (prefers-reduced-motion:reduce){ .pilvi b{animation:none} .yla .lenkki path{animation:none; transition:none} .kansi,.avaa path{transition:none} }