/* css/etusivu.css — julkinen esittelysivu ja tekstisivut.

   Sama idea kuin sovelluksessa: pimeä kehys, ja sisältö paneelina sen päällä. Sivua katsoo
   joku joka ei vielä tiedä mikä tämä on, joten typografia on suurempaa ja väljempää kuin
   työkalun puolella. */

body.etusivu{background:var(--kehys);background-attachment:fixed;min-height:100vh}
.etusivu .palkki .kirjaudu{font-size:13px;font-weight:600;color:var(--frame-ink);
  padding:7px 13px;border:1px solid var(--frame-line);border-radius:var(--r1);
  transition:background .09s}
.etusivu .palkki .kirjaudu:hover{background:var(--frame-line);text-decoration:none}

.etusivu main{position:relative;width:100%;max-width:1000px;margin:0 auto 24px;
  padding:52px 48px 56px;background:var(--surface);border-radius:var(--r3);
  box-shadow:var(--paneeli)}

.esittely{max-width:640px}
.esittely h1{font-size:40px;font-weight:700;line-height:1.06;letter-spacing:-.032em;
  margin-bottom:18px}
.ingressi{font-size:16.5px;color:var(--ink-2);line-height:1.62;margin:0}
.napit{margin-top:26px}
.napit .nappi{min-height:42px;padding:0 20px;font-size:14px}
.napit .nappi:hover{text-decoration:none}

/* Kolme kohtaa erottuvat toisistaan hiusviivalla eivätkä omilla laatikoillaan: paneeli on
   jo laatikko, ja kolme laatikkoa sen sisällä on kolme laatikkoa liikaa. */
.kolme{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;
  border-top:1px solid var(--line)}
.kolme article{padding:24px 22px 4px;border-left:1px solid var(--line)}
.kolme article:first-child{border-left:0;padding-left:0}
.kolme h2{font-size:15px;font-weight:600;margin-bottom:7px}
.kolme p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.62}
.kolme em{font-style:normal;color:var(--ink)}

.tanaan-esittely{margin-top:32px;padding:22px;border-radius:var(--r2);
  background:var(--surface-2)}
.tanaan-esittely h2{font-size:16px;font-weight:600;margin-bottom:7px}
.tanaan-esittely p{margin:0;max-width:640px;color:var(--ink-2);line-height:1.65;
  font-size:14px}

.alaosa{padding:4px 20px 28px;text-align:center;color:var(--frame-ink-2);font-size:12.5px}
.alaosa a{color:var(--frame-ink-2)}
.alaosa a:hover{color:var(--frame-ink)}
.alaosa .erotin{margin:0 8px;color:var(--frame-line)}

/* ---------- tekstisivu ----------
   Rivinpituus on rajattu: noin 70 merkin jälkeen silmä hukkaa rivin alun palatessaan. */
.teksti-sivu{max-width:760px}
.teksti-sivu h1{font-size:30px;font-weight:700;letter-spacing:-.028em;margin-bottom:14px}
.teksti-sivu h2{font-size:15px;font-weight:700;margin:30px 0 7px}
.teksti-sivu p,.teksti-sivu li{color:var(--ink-2);line-height:1.7;font-size:14px}
.teksti-sivu ul{margin:8px 0;padding-left:20px}
.teksti-sivu li{margin:6px 0}
.teksti-sivu strong{color:var(--ink);font-weight:600}

@media (max-width:820px){
  .etusivu main{margin:0 12px 16px;padding:28px 20px 36px;border-radius:var(--r2)}
  .kolme{grid-template-columns:1fr;margin-top:36px}
  .kolme article{border-left:0;border-top:1px solid var(--line);padding:20px 0 4px}
  .kolme article:first-child{border-top:0}
  .esittely h1{font-size:30px}
  .ingressi{font-size:15px}
}