/* ────────────────────────────────────────────────────────────────────
   SIJAINTI · the pieces the location page is made of (index.html composes them; sijainti.js moves them).
   The page stands on runko.css, as asunnot/ does.

   ilma      an aerial photograph in a window. The photograph is north up and knows which metres of the
             map it covers, so sijainti.js can show any part of it and put the house's mark on it
   talo      the house's mark: the rust dot of the map
   ikkuna    a photograph in a window
   kartta    the front page's map in a window; in a narrow window it is wider than the screen and moves
             under a finger
   ──────────────────────────────────────────────────────────────────── */
.sivu{--reuna:calc(var(--m) + .28 * var(--c))}
figure{margin:0}

/* ── an aerial photograph in a window ─────────────────────────────── */
.ilma{position:relative; overflow:hidden; background:#3b4732}
.ilma-sis{position:absolute; inset:0; will-change:transform}
.ilma-sis img{position:absolute; max-width:none}
/* the house: the map's rust dot, with a rim of paper so that it reads on the forest */
.talo{position:absolute; width:0; height:0; pointer-events:none}
.talo i{position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:var(--ruoste); box-shadow:0 0 0 2px #fbf8f3, 0 2px 14px rgba(0,16,24,.5)}
.talo b{position:absolute; left:21px; top:0; transform:translateY(-54%); font-family:var(--antiikva); font-weight:400; font-size:max(2vw,23px); line-height:1; white-space:nowrap; color:#fff; text-shadow:0 1px 20px rgba(0,16,24,.7), 0 0 4px rgba(0,16,24,.4)}

/* ── a photograph in a window ─────────────────────────────────────── */
.ikkuna{position:relative; overflow:hidden; background:#dedbd5}
.ikkuna img{width:100%; height:100%; object-fit:cover; object-position:var(--op,50% 50%)}

/* ── the map in a window ──────────────────────────────────────────── */
.kartta-ikkuna{position:relative; overflow:hidden; background:#eae5dc}
.kartta-ala{position:relative; width:100%; height:100%}
.kartta{position:absolute; inset:0}
/* the same view as a photograph, lying on the map: it fades, and the drawing is under it */
.orto{position:absolute; inset:0; overflow:hidden; background:#3b4732; transition:opacity 1.7s cubic-bezier(.45,0,.25,1)}
.orto img{position:absolute; max-width:none}
.piirros .orto{opacity:0; pointer-events:none}

.huom{padding:11vw var(--m) 5vw; text-align:center; font-size:11.5px; font-weight:400; opacity:.6}

@media (max-width:900px){
  .talo b{left:0; top:17px; transform:translateX(-50%)}                 /* the name goes under its dot: beside it, it would run off the screen */
  /* the map keeps its size, so its names stay as large as they are drawn, and the window shows a part of it */
  .kartta-ikkuna{margin:0 calc(-1 * var(--m)); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
  .kartta-ikkuna::-webkit-scrollbar{display:none}
  .kartta-ala{width:820px; height:500px}
  .huom{padding:90px var(--m) 40px}
}
@media (prefers-reduced-motion:reduce){ .orto{transition:none} }