/* ────────────────────────────────────────────────────────────────────
   RUNKO · the ground a subpage stands on. So far that is asunnot/, the one subpage that is kept as the
   starting point for the others. A page's opening is its own idea and lives in the page; what is shared is here:

   top     the row on its cloud (yla.css, yla.js)
   type    the faces and sizes of the front page
   loppu   the paper runs out into the film, with the front page's invitation in the same words

   Wide screens first, as the front page; under 900 px everything is one column.
   ──────────────────────────────────────────────────────────────────── */
:root{
  --antiikva:'Cormorant Garamond',Georgia,serif;
  --m:4.2vw;                                   /* page margin */
  --c:calc((100vw - 2 * var(--m)) / 6);        /* one of six columns */
  --f-h2:3.34vw; --f-kurs:1.5vw; --f-lause:1.9vw;
}
html{background:#14262d; scroll-behavior:smooth}
body{background:none; min-width:0}
.isot{font-family:var(--antiikva); font-weight:300; text-transform:uppercase; letter-spacing:-.012em; line-height:1.02}
.kursiivi{font-family:var(--antiikva); font-style:italic; font-weight:400; letter-spacing:0}
.tunnus{font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1.45}
.otsake{font-size:var(--f-kurs); line-height:1; opacity:.7}                          /* the name of a chapter: plain italic */
.lause{font-family:var(--antiikva); font-size:var(--f-lause); line-height:1.27}      /* a sentence to read, in the serif */
.ilmesty{opacity:0; transform:translateY(26px); transition:opacity 1.3s ease, transform 1.5s cubic-bezier(.2,.7,.2,1)}
.ilmesty.on{opacity:1; transform:none}

/* ── the film: fixed, behind everything ───────────────────────────── */
.filmi{position:fixed; inset:0; z-index:0; width:100%; height:100%; object-fit:cover}
.sivu{position:relative; z-index:1}
.paperi{position:relative; background:var(--paper)}
.paperi + .paperi{margin-top:-1px}                                                   /* no seams between sheets of paper */

/* own plot or rented plot: the front page's switch */
.valinta-tontti{display:flex; gap:2px; width:max-content; padding:4px; border:1px solid rgba(0,31,46,.32); border-radius:99px}
.valinta-tontti button{height:38px; padding:0 22px; border-radius:99px; font-size:13.5px; font-weight:400; white-space:nowrap; transition:background-color .3s,color .3s}
.valinta-tontti button[aria-pressed="true"]{background:var(--petrol); color:#fff}
.vaihtuu{transition:opacity .25s}
.vaihtuu.pois{opacity:0}

/* ── loppu: the paper runs out, and the invitation is the same on every page ── */
.haihtuu{height:52vh; background:linear-gradient(var(--paper),rgba(239,237,235,.9) 18%,rgba(239,237,235,.5) 52%,rgba(239,237,235,0))}
.avoin{position:relative; min-height:88vh; margin-top:-14vh; padding:0 var(--m) 34px; display:grid; grid-template-rows:1fr auto; justify-items:center; text-align:center; color:#fff; background:linear-gradient(rgba(6,18,24,0),rgba(6,18,24,.42) 30%,rgba(6,18,24,.7) 62%,rgba(6,18,24,.8))}
.avoin .keski{align-self:end; padding-bottom:8vh}
.avoin h2{font-size:5.4vw; text-shadow:0 2px 50px rgba(0,16,24,.35)}
.avoin .keski > p{margin:20px auto 0; max-width:31em; font-size:15px; line-height:1.55; font-weight:400}
.valittajat{display:flex; justify-content:center; gap:5vw; margin-top:5.5vh; font-size:13px; font-weight:400; line-height:1.5}
.valittajat b{display:block; font-family:var(--antiikva); font-weight:400; font-size:19px; line-height:1.25}
.alatunniste{display:flex; justify-content:space-between; align-items:baseline; gap:3vw; width:100%; font-size:12.5px; font-weight:400; text-align:left}
.alatunniste nav{display:flex; flex-wrap:wrap; gap:6px 26px}
.alatunniste a{transition:opacity .25s}
.alatunniste a:hover{opacity:.6}
.alatunniste > span{font-size:15.5px; white-space:nowrap}                    /* the builders, a little larger, each a door to its own site */
.alatunniste > span a{border-bottom:1px solid currentColor; padding-bottom:1px}

/* ── one column ───────────────────────────────────────────────────── */
@media (max-width:900px){
  :root{--m:22px; --f-h2:8.4vw; --f-kurs:5.2vw; --f-lause:22px}
  .avoin{min-height:0}
  .avoin .keski{padding:22vh 0 56px}
  .avoin h2{font-size:11.5vw}
  .valittajat{flex-direction:column; gap:14px; margin-top:44px}
  .alatunniste{flex-direction:column; align-items:center; gap:14px; text-align:center}
  .alatunniste nav{justify-content:center}
  .alatunniste > span{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ilmesty{opacity:1; transform:none; transition:none}
}