:root{
  --jaa:#EDF3F7; --mustikka:#2B2D5C; --kupari:#C98A2E; --marja:#8E2F4F;
  --teksti:#1E1F2A; --viiva:#C6D2DC; --vaalea:#F8FAFC; --harmaa:#4A4E66;
  --otsikko:'Century Gothic','Avenir Next','Trebuchet MS',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--jaa);color:var(--teksti);
  font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  font-size:17px;line-height:1.7;-webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,.merkki__nimi,.solmu__nimi,.solmu__piste,.nappi,.lehti__sarja,
.lehti__johdanto,.kartta__lohko h2,.kentta label{font-family:var(--otsikko)}
a{color:var(--marja)}
img{max-width:100%}
.hyppaa{position:absolute;left:-9999px;top:0;background:var(--kupari);color:#fff;padding:10px 16px;z-index:99}
.hyppaa:focus{left:0}
.kehys{display:flex;align-items:flex-start}

/* ---------- aikajana: pystysuora rata vasemmalla ---------- */
.aikajana{
  position:sticky;top:0;flex:0 0 272px;width:272px;height:100vh;overflow-y:auto;
  background:var(--mustikka);color:#EDF3F7;padding:26px 18px 44px;z-index:20;
}
.merkki{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;margin-bottom:24px}
.merkki__glyyfi{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--kupari);
  color:var(--mustikka);display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:.06em;
}
.merkki__nimi{font-size:15px;line-height:1.25}
.merkki__nimi em{color:var(--kupari);font-style:normal}
.rata__lista{list-style:none;margin:0;padding:0;position:relative}
.rata__lista::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:rgba(237,243,247,.28)}
.solmu{position:relative;padding-left:38px;margin:0 0 16px}
.solmu__napa{display:block;text-decoration:none;color:#EDF3F7}
.solmu__piste{
  position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(237,243,247,.5);background:var(--mustikka);color:#EDF3F7;
  display:grid;place-items:center;font-size:9.5px;font-weight:700;letter-spacing:0;
}
.solmu__nimi{display:block;font-size:14px;font-weight:700;padding-top:5px}
.solmu--nyt .solmu__piste{background:var(--kupari);border-color:var(--kupari);color:var(--mustikka)}
.solmu--nyt .solmu__nimi{color:var(--kupari)}
.solmu__sivut{list-style:none;margin:6px 0 0;padding:0}
.solmu__sivut a{
  display:block;color:rgba(237,243,247,.7);text-decoration:none;font-size:12.5px;
  padding:2px 0 2px 9px;border-left:2px solid transparent;
}
.solmu__sivut a:hover{color:#fff}
.solmu__sivut a.nyt{color:var(--kupari);border-left-color:var(--kupari)}

/* ---------- sisältö ---------- */
.paakolumni{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.sisalto{flex:1;padding:38px 34px 8px}
.lehti{
  max-width:880px;margin:0 auto;background:var(--vaalea);border:1px solid var(--viiva);
  border-top:6px solid var(--kupari);border-radius:3px;padding:34px 40px 30px;
}
.lehti__sarja{margin:0 0 8px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--marja)}
.lehti h1{font-size:30px;line-height:1.22;margin:0 0 14px;color:var(--mustikka)}
.lehti__johdanto{
  font-size:18px;color:#3A3D55;border-left:4px solid var(--kupari);padding:2px 0 2px 15px;margin:0 0 24px;
}
.lehti h2{font-size:21px;color:var(--mustikka);margin:32px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--jaa)}
.lehti h3{font-size:17px;color:var(--marja);margin:24px 0 8px}
.lehti p{margin:0 0 15px}
.lehti ul,.lehti ol{margin:0 0 17px;padding-left:24px}
.lehti li{margin-bottom:7px}
.lehti img{display:block;border:1px solid var(--viiva);border-radius:2px}
.kuva{margin:22px 0;background:var(--jaa);border:1px solid var(--viiva);padding:9px;border-radius:2px}
.kuva figcaption{font-size:12.5px;color:var(--harmaa);padding-top:8px;line-height:1.5}
.ruudukko{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin:20px 0}
.kortti{background:var(--jaa);border:1px solid var(--viiva);border-left:4px solid var(--marja);padding:14px 16px;border-radius:2px}
.kortti h3{margin:0 0 6px;font-size:16px}
.kortti p{margin:0;font-size:15px}
.taulukko{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.taulukko caption{text-align:left;font-size:13px;color:var(--harmaa);padding-bottom:8px}
.taulukko th,.taulukko td{border:1px solid var(--viiva);padding:9px 11px;text-align:left;vertical-align:top}
.taulukko thead th{background:var(--mustikka);color:#EDF3F7;font-family:var(--otsikko);font-size:13.5px}
.taulukko tbody tr:nth-child(even){background:var(--jaa)}

/* ---------- lomake ---------- */
.lomake{display:grid;gap:15px;margin:20px 0}
.kentta{display:grid;gap:6px}
.kentta label{font-size:13px;color:var(--mustikka);font-weight:700;letter-spacing:.03em}
.kentta input,.kentta select,.kentta textarea{
  font:inherit;padding:10px 12px;border:1px solid var(--viiva);border-radius:2px;background:#fff;color:var(--teksti);
}
.kentta textarea{min-height:150px;resize:vertical}
.kentta input:focus,.kentta select:focus,.kentta textarea:focus{outline:2px solid var(--kupari);outline-offset:1px}
.suostumus{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.suostumus input{margin-top:5px}
.nappi{
  font-family:var(--otsikko);background:var(--mustikka);color:#fff;border:0;padding:13px 30px;
  border-radius:2px;cursor:pointer;letter-spacing:.05em;font-size:15px;justify-self:start;
}
.nappi:hover{background:var(--marja)}
.vahvistus{background:var(--jaa);border:1px solid var(--viiva);border-left:4px solid var(--kupari);padding:16px 18px;margin:18px 0}

/* ---------- riippumattomuus ---------- */
.riippumaton{
  margin:30px 0 0;padding:14px 16px;background:#FBF6EC;border:1px dashed var(--kupari);
  font-size:13.5px;color:var(--harmaa);line-height:1.6;
}
.riippumaton strong{color:var(--marja)}

/* ---------- jalki ---------- */
.jalki{background:var(--mustikka);color:#DCE4EC;padding:32px 34px 26px;margin-top:36px}
.kartta{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:20px;max-width:1120px;margin:0 auto 22px}
.kartta__lohko h2{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kupari);margin:0 0 9px}
.kartta__lohko a{display:block;color:#DCE4EC;text-decoration:none;font-size:13.5px;padding:2px 0}
.kartta__lohko a:hover{color:#fff;text-decoration:underline}
.jalki__tiedot{max-width:1120px;margin:0 auto;border-top:1px solid rgba(237,243,247,.25);padding-top:16px;font-size:13px;line-height:1.7}
.jalki__tiedot a{color:var(--kupari)}
.jalki__lauseke{color:#AEB9C8;margin-bottom:0}

/* ---------- mobiili: vaakasuora aikajananauha ---------- */
@media (max-width:760px){
  .kehys{display:block}
  .aikajana{
    position:sticky;top:0;width:auto;height:auto;flex:none;padding:11px 14px 9px;z-index:40;
    box-shadow:0 2px 10px rgba(0,0,0,.22);
  }
  .merkki{margin-bottom:10px;gap:9px}
  .merkki__glyyfi{flex:0 0 30px;width:30px;height:30px;font-size:10.5px}
  .merkki__nimi{font-size:13.5px}
  .rata{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rata__lista{display:flex;gap:4px;position:static;padding-bottom:3px}
  .rata__lista::before{display:none}
  .solmu{flex:0 0 auto;padding-left:0;margin:0;padding-right:12px;border-right:1px solid rgba(237,243,247,.18)}
  .solmu:last-child{border-right:0}
  .solmu__napa{display:inline-flex;align-items:center;gap:7px}
  .solmu__piste{position:static;width:23px;height:23px;font-size:8.5px;flex:0 0 23px}
  .solmu__nimi{display:inline-block;font-size:12px;white-space:nowrap;padding-top:0}
  .solmu__sivut{display:none}
  .sisalto{padding:20px 14px 6px}
  .lehti{padding:22px 18px 20px;border-top-width:5px}
  .lehti h1{font-size:24px}
  .lehti__johdanto{font-size:16.5px}
  .jalki{padding:24px 16px 20px}
  .kartta{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}
}