/* Verstas — opas puutöihin. Yhteinen ulkoasu.
 *
 * PELTOVIRTA-TEEMA. Tämä sivusto linkitetään peltovirta.com:n etusivulta,
 * joten se käyttää samaa palettia ja samoja kirjasimia kuin sisarsivut
 * (peltovirta.com, pelit.peltovirta.com): okra, vesi ja turve,
 * Superclarendon otsikoissa ja Avenir Next leipätekstissä. Ylälaidassa on
 * sama perhepalkki ja sama merkki — kolme vakoa jotka puro katkaisee.
 *
 * PALETTI ON TASAN KAHDESSA PAIKASSA: `:root` ja tumma media query.
 * Kaikki muu väri johdetaan niistä `var()`- ja `color-mix()`-arvoilla,
 * eikä yhtään heksalukua kirjoiteta kolmanteen paikkaan. Tarkistin laskee
 * esiintymät ja punastuu kolmannesta. Syy on kokemus: kolmas paikka
 * löytyy vasta kun teema on jo eriytynyt.
 *
 * Sovelluskehys (kiinteä ylapalkki + vierivä .sisalto) on tarkoituksellinen
 * poikkeus Peltovirran tavallisesta dokumenttivirrasta. Syy on
 * todennettavuus: kun sivu ei koskaan ole ikkunaa korkeampi, kuvakaappaus
 * näyttää sen mitä käyttäjä näkee, ja laskurit pysyvät näkyvissä kun
 * arvoja säätää.
 */
@font-face {
  font-family: "Peltovirta Slab";
  src: url("/peltovirta-slab.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}


:root {
  --display: "Superclarendon", "Peltovirta Slab", "Bookman Old Style", Rockwell, Georgia, serif;
  --body: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Menlo, "SF Mono", ui-monospace, monospace;

  --ground: #e2e7e6;
  --ground-2: #d8dedc;
  --kohotus: #edf0ef;
  --ink: #16201e;
  --ink-2: #4d5a57;
  --accent: #855c15;
  --water: #1e4e49;
  --varo: #8a2f1c;
  --hair: rgba(22, 32, 30, 0.14);
  --hair-strong: rgba(22, 32, 30, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d1413;
    --ground-2: #151f1d;
    --kohotus: #1c2725;
    --ink: #dde4e1;
    --ink-2: #94a19e;
    --accent: #d5a44c;
    --water: #52a096;
    --varo: #e08b74;
    --hair: rgba(221, 228, 225, 0.2);
    --hair-strong: rgba(221, 228, 225, 0.38);
  }
}

/* ---------- johdetut sävyt ----------
 * Ei yhtään uutta heksalukua. `color-mix` sekoittaa korostuksen pohjaan,
 * joten sävyt kääntyvät oikein päin itsestään kun teema vaihtuu: tummassa
 * pohja on tumma, joten sama sekoitus tuottaa vaaleamman tuloksen.
 * Piirroksissa tämä on ratkaisevaa — vuosirenkaat katosivat kerran
 * rungon sisään juuri siksi, että sävy oli kirjoitettu käsin. */
:root {
  --varjo: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
  --pehmea: color-mix(in srgb, var(--accent) 12%, var(--ground));

  /* Paperin kaksi puolta. Ero on tarkoituksella pieni: paperi ON lähes
   * yksivärinen, ja iso kontrasti näyttäisi kahdelta materiaalilta eikä
   * yhden arkin kahdelta puolelta. */
  --paperi-etu: color-mix(in srgb, var(--ink) 11%, var(--kohotus));
  --paperi-taka: color-mix(in srgb, var(--accent) 34%, var(--kohotus));
  --reuna: var(--hair-strong);
  --jalki: color-mix(in srgb, var(--ink) 38%, var(--ground));
  --taitelinja: var(--water);
  --nuoli: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root { --varjo: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3); }
}

/* Yksi kerroin tekstin koolle. HUOM NIMI: `--tekstikoko`, EI `--teksti` —
 * jälkimmäinen on toisessa projektissa tekstin VÄRI, ja samanniminen
 * kerroin korvaisi sen luvulla 1. */
:root { --tekstikoko: 1; }
:root[data-teksti="iso"]   { --tekstikoko: 1.18; }
:root[data-teksti="isoin"] { --tekstikoko: 1.38; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: var(--ground); color: var(--ink); }

body {
  font-family: var(--body);
  font-size: calc(16px * var(--tekstikoko));
  line-height: 1.55;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
::selection { background: var(--accent); color: var(--ground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app {
  height: 100%;
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- perhepalkki: tämä sivu kuuluu Peltovirtaan ----------
 * Sama merkintä kuin Automatkan sivuilla. Kosketusalue on 2,75rem
 * (n. 44 px) vaikka teksti on 0,68rem: navigointielementti puhelimessa,
 * ja pieni linkki on pieni maali. */
.perhe {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.9rem 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.perhe svg { flex: none; width: 1.15rem; height: 1.15rem; }
.perhe b { font-weight: 400; color: var(--accent); }
.perhe-linkki {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin: -0.55rem 0;
  color: inherit;
  text-decoration: none;
}
.perhe-linkki:hover b,
.perhe-linkki:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ylapalkki ---------- */

.ylapalkki {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 14px 10px;
  border-bottom: 1px solid var(--hair-strong);
}
.ylapalkki h1 {
  font-family: var(--display);
  font-size: calc(clamp(16px, 4.6vw, 21px) * var(--tekstikoko));
  margin: 0;
  letter-spacing: -.2px;
  font-weight: 600;
}
.ylapalkki .alaotsikko {
  display: block;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
.ylapalkki .tila { margin-left: auto; display: flex; gap: 8px; align-items: center; }

a.vs-back {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: calc(22px * var(--tekstikoko)); line-height: 1;
  color: inherit;
  background: var(--kohotus);
  border: 1px solid var(--hair);
}
a.vs-back:active { transform: scale(.94); }

/* ---------- vierivä sisältö ----------
 * min-height:0 on pakollinen: flex-lapsen oletus on min-height:auto,
 * jolloin säiliö ei kutistu sisältöään pienemmäksi. */
.sisalto {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 40px;
}

.kortti {
  background: var(--kohotus);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 18px;
  margin: 0 0 12px;
  box-shadow: var(--varjo);
}
/* ---------- osion otsikko ----------
 * ★ HIERARKIA OLI NURIN, JA SE OLI KOKO SIVUSTON «TIETOKIRJAMAISUUDEN»
 * suurin yksittäinen syy. Osio-otsikko oli 11 px himmeä monospace-versaali
 * ja alaotsikko `.teksti h3` 17 px Superclarendon täydellä värillä: silmä
 * ei löytänyt osiorajoja lainkaan, vaan näki yhden pitkän tekstipinon.
 *
 * Mono-versaali on hyvä merkintä pikkuotsikolle (`label`, `th`, `.merkki`,
 * `.kysymys`) mutta väärä osiotasolle, joka on sivun tärkein jäsennys.
 * Suhde on nyt 19 / 15,5 = 1,23 — riittävä porras ilman että sivusta
 * tulee otsikkoluettelo. Tarkistin lukee molemmat koot CSS:stä ja
 * vaatii h2 > h3, joten hierarkia ei voi enää kääntyä huomaamatta. */
.kortti > h2 {
  font-family: var(--display);
  margin: 0 0 10px;
  font-size: calc(19px * var(--tekstikoko));
  letter-spacing: -.2px;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- leipäteksti ----------
 * Avenir Next, rivinmitta rajattu KAPPALEELLA eikä säiliöllä: kortissa on
 * myös taulukoita ja piirroksia, jotka saavat käyttää koko leveyden. */
.teksti p, .teksti li {
  font-size: calc(15.5px * var(--tekstikoko));
  line-height: 1.62;
  max-width: 62ch;
}
.teksti p { margin: 0 0 .85em; }
.teksti p:last-child { margin-bottom: 0; }
.teksti ul, .teksti ol { margin: 0 0 .9em; padding-left: 1.3em; }
.teksti li { margin: 0 0 .4em; }

/* Alaotsikko jää osiotason ALAPUOLELLE — ks. `.kortti > h2` yllä. */
.teksti h3 {
  font-family: var(--display);
  font-size: calc(15.5px * var(--tekstikoko));
  font-weight: 600;
  margin: 1.5em 0 .45em;
  letter-spacing: -.2px;
}
.teksti h3:first-child { margin-top: 0; }
.teksti a { color: var(--accent); text-underline-offset: 3px; }

/* Työn järjestys katalogikortin sisällä. Numerointi on osa sisältöä —
/* ---------- mekanismilaatikko ----------
 * Se yksi lause, josta luvun kaikki muut ohjeet seuraavat. Jos luvussa on
 * useampi kuin yksi, luku on jaettava kahtia. */
.mekanismi {
  border-left: 3px solid var(--accent);
  background: var(--pehmea);
  padding: 13px 15px;
  margin: 16px 0;
}
.mekanismi p {
  margin: 0;
  font-size: calc(15.5px * var(--tekstikoko));
  line-height: 1.55;
  max-width: 58ch;
}

/* Lähdeviite mitan vieressä. Oma tyylinsä eikä osa .pieniteksti-ä, jotta
 * puuttuvan lähteen huomaa: sille on paikka. */
.lahde {
  display: block;
  font-size: calc(11.5px * var(--tekstikoko));
  line-height: 1.5;
  color: var(--ink-2);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  max-width: 70ch;
}
.lahde b { color: var(--ink); font-weight: 600; }

.kaava {
  font-family: var(--mono);
  font-size: calc(13px * var(--tekstikoko));
  background: var(--ground-2);
  border-left: 3px solid var(--water);
  padding: 12px 14px;
  margin: 14px 0;
  overflow-x: auto;
}

/* ---------- yleiset ---------- */

.himmea { color: var(--ink-2); }
.pieniteksti { font-size: calc(12.5px * var(--tekstikoko)); color: var(--ink-2); line-height: 1.5; }

/* Etusivun hakuosumat reittisivujen riveiltä. Lista eikä kortteja: nämä
   ovat vastauksia yhteen kysymykseen, eivät selattavaa sisältöä. */
.osumakortti h3:first-child { margin-top: 0; }
.osumakortti h3 { margin: 1.1em 0 .3em; }
.osumat { list-style: none; margin: 0; padding: 0; }
.osumat li { padding: 7px 0; border-bottom: 1px solid var(--hair); }
.osumat li:last-child { border-bottom: 0; padding-bottom: 0; }
.osumat a { font-weight: 600; }
.osumat .himmea { display: block; font-family: var(--mono); font-size: calc(11px * var(--tekstikoko)); }
.virhe { color: var(--varo); font-weight: 600; }

/* Huomautus ≠ virhe, ja ero on tarkoituksellinen. Suomen talvi vie puun
 * kaavan pätevyysalueen alapuolelle täysin normaaleissa oloissa, joten
 * ilmoitus näkyy oletusarvoillakin. Punaisena se lukisi «sivu on rikki».
 * Punainen varataan sille, mitä käyttäjän on korjattava. */
.huomautus {
  border-left: 3px solid var(--water);
  background: var(--ground-2);
  padding: 10px 13px;
  font-size: calc(12.5px * var(--tekstikoko));
  line-height: 1.5;
  color: var(--ink-2);
}
.huomautus b { color: var(--ink); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--hair); font-size: calc(13px * var(--tekstikoko)); }
th {
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  font-weight: 400;
}
td.luku, th.luku { text-align: right; }

/* Leveä sisältö vierii omassa laatikossaan — sivu itse ei koskaan vaakavieri. */
.vieritin { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }


/* ---------- ASKELKUVA ----------
 *
 * Kuva tulee `piirto.js`:stä valmiina SVG:nä. Täällä päätetään vain koko
 * ja värit — ja värit ovat muuttujia, joten sama kuva kelpaa sekä ruudulle
 * että mustavalkoiselle tulosteelle. */

.askelkuva { display: block; width: 100%; height: auto; max-height: 46vh; }
.askelkuva .kerrokset .etupuoli { fill: var(--paperi-etu); }
.askelkuva .kerrokset .takapuoli { fill: var(--paperi-taka); }
.askelkuva .reunat path { fill: none; stroke: var(--reuna); stroke-width: 0.7; }
.askelkuva .jaljet line { stroke: var(--jalki); stroke-width: 0.6; stroke-dasharray: 3 3; }
.askelkuva .taitelinja line { stroke: var(--taitelinja); stroke-width: 1.5; fill: none; }
.askelkuva .taitelinja.laakso line { stroke-dasharray: 7 4; }
.askelkuva .taitelinja.vuori line { stroke-dasharray: 9 3 1.5 3; }
.askelkuva .nuoli .kaari { fill: none; stroke: var(--nuoli); stroke-width: 1.7; }
.askelkuva .nuoli.vuori .kaari { stroke-dasharray: 5 3.5; }
.askelkuva .nuolenkarki { fill: var(--nuoli); stroke: none; }
.askelkuva .nuolenkarki.avoin { fill: none; stroke: var(--nuoli); stroke-width: 1.7; }

/* Kuvakehys: kuvan on pysyttävä paikallaan askeleesta toiseen, jotta
 * seuraavaan siirtyminen ei hyppäytä sivua. Korkeus on siis kiinteä ja
 * kuva keskitetään siihen. */
.kuvakehys {
  background: var(--kohotus);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vh;
  margin: 0 0 12px;
}

/* ---------- ASKELSELAIN ---------- */

.askelrivi { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.askelrivi .luku {
  font-family: var(--mono);
  font-size: calc(12px * var(--tekstikoko));
  letter-spacing: .1em;
  color: var(--ink-2);
  min-width: 6.5em;
  text-align: center;
}
.askelrivi button {
  flex: 1;
  min-height: 2.9rem;
  font-size: calc(15px * var(--tekstikoko));
  font-family: var(--body);
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--hair-strong);
  background: var(--kohotus);
  color: var(--ink);
}
.askelrivi button:disabled { opacity: .4; }
.askelrivi button:active:not(:disabled) { transform: scale(.98); }

.ohjeteksti {
  font-size: calc(17px * var(--tekstikoko));
  line-height: 1.5;
  margin: 0 0 6px;
}
.ohjeteksti .laji {
  display: inline-block;
  font-family: var(--mono);
  font-size: calc(10.5px * var(--tekstikoko));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: .5em;
  vertical-align: 2px;
}

/* Askelpalkki: montako askelta on jäljellä. Lapsi kysyy sitä ensimmäisenä. */
.askelpalkki { display: flex; gap: 3px; margin: 0 0 12px; }
.askelpalkki i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--hair);
}
.askelpalkki i.tehty { background: var(--accent); }

/* ---------- MALLIKORTIT ---------- */

.kortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 10px; }
.mallikortti {
  display: block;
  text-decoration: none;
  background: var(--kohotus);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 10px 12px;
  box-shadow: var(--varjo);
}
.mallikortti .kuva { background: var(--ground-2); border-radius: 8px; margin: 0 0 8px; padding: 4px; }
.mallikortti .kuva svg { max-height: 8rem; }
.mallikortti b { display: block; font-family: var(--display); font-size: calc(16px * var(--tekstikoko)); }
.mallikortti span {
  display: block;
  font-family: var(--mono);
  font-size: calc(10.5px * var(--tekstikoko));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
.mallikortti .mitat { margin-top: 6px; font-size: calc(12px * var(--tekstikoko)); color: var(--ink-2); }

/* ---------- TAITTOPOHJA ---------- */

.taittopohja { display: block; width: 100%; height: auto; }
.taittopohja .arkki { fill: var(--paperi-etu); stroke: var(--reuna); stroke-width: 0.8; }
.taittopohja .taite { stroke: var(--jalki); stroke-width: 0.7; stroke-dasharray: 5 3; }
.taittopohja .numero {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 7px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 2.5;
}

/* ---------- TULOSTE ----------
 *
 * Tulostettu ohje on eri väline kuin ruutu: se on mustavalkoinen, siinä ei
 * ole nappeja eikä askelselainta, ja kaikki askeleet ovat yhtä aikaa
 * näkyvissä. Siksi tulostetyyli EI ole ruututyylin pikkuveli vaan oma
 * asettelunsa — ja siksi laakso ja vuori erottuvat viivakuviosta eivätkä
 * väristä. */
@media print {
  :root {
    --ground: #fff; --ground-2: #fff; --kohotus: #fff;
    --ink: #000; --ink-2: #444;
    --accent: #000; --water: #000; --varo: #000;
    --hair: rgba(0, 0, 0, .25); --hair-strong: rgba(0, 0, 0, .5);
    --paperi-etu: #fff; --paperi-taka: #eee;
  }
  html, body { height: auto; overflow: visible; background: #fff; }
  .app { height: auto; max-width: none; }
  .sisalto { overflow: visible; padding: 0; }
  .perhe, .askelrivi, .askelpalkki, .vs-back, .tila, .eitulosteta { display: none !important; }
  .kortti { border: none; box-shadow: none; background: none; padding: 0 0 6mm; break-inside: avoid; }
  .kuvakehys { border: none; background: none; min-height: 0; padding: 0; }
  @page { margin: 14mm; }
}

/* ---------- osion otsikko etusivulla ---------- */
.osiootsikko {
  font-family: var(--display);
  font-size: calc(15px * var(--tekstikoko));
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 8px;
}
.hide { display: none; }
/* ---------- tuloslaatikot ---------- */

.parit { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pari {
  background: var(--ground-2);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 11px 13px;
}
.pari b {
  display: block;
  font-family: var(--display);
  font-size: calc(21px * var(--tekstikoko));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
  line-height: 1.15;
}
.pari span {
  display: block;
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 4px;
}
.pari.laaja { grid-column: 1 / -1; }
.pari.huomio { border-color: var(--accent); background: var(--pehmea); }

/* ---------- yleiset ---------- */

/* ---------- TULOSTESIVU ----------
 *
 * Kolme saraketta ja enintään neljä riviä: kaksitoista ruutua, joihin
 * pisimmänkin mallin askeleet mahtuvat. Määrä ei ole silmämääräinen —
 * tarkistin laskee askeleet ja punastuu, jos malli ei mahdu arkille. */
.tulosteruudukko {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 10px;
}
.tulosteaskel {
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 6px 7px 8px;
  background: var(--kohotus);
  break-inside: avoid;
}
.tulostekuva { background: var(--ground-2); border-radius: 5px; margin: 0 0 5px; }
.tulostekuva svg { max-height: 7.5rem; }
.tulosteaskel figcaption { font-size: calc(11.5px * var(--tekstikoko)); line-height: 1.35; }
.tulosteaskel figcaption b { display: block; font-family: var(--mono); font-size: calc(9.5px * var(--tekstikoko));
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.tulosteotsikko { font-family: var(--display); font-size: calc(20px * var(--tekstikoko)); margin: 0 0 2px; }
.tulosteselite { font-size: calc(12.5px * var(--tekstikoko)); color: var(--ink-2); margin: 0 0 10px; max-width: 62ch; }
.tulostealaviite { font-family: var(--mono); font-size: calc(9.5px * var(--tekstikoko));
  color: var(--ink-2); letter-spacing: .08em; margin: 10px 0 0; }
.pohjakuva { background: var(--kohotus); border: 1px solid var(--hair); border-radius: 10px; padding: 8px; }
button.pieni.valittu { border-color: var(--accent); background: var(--pehmea); }

@media print {
  .tulosteruudukko { grid-template-columns: repeat(3, 1fr); gap: 5mm; }
  .tulosteaskel { border: 1px solid #999; background: none; }
  .tulostekuva { background: none; }
  .tulostekuva svg { max-height: 34mm; }
  .pohjakuva { border: none; padding: 0; background: none; }
  .taittopohja { max-height: 240mm; }
}

/* ---------- NOSTONUOLI ----------
 * Eri muoto kuin taitosnuolella, koska liike on eri: katkoviiva ja ontto
 * kärki tarkoittavat «nosta tämä irti tasosta», ei «taita tähän». Sarana
 * piirtyy ohuena pisteviivana, jotta näkyy mistä kohtaa se kääntyy. */
.askelkuva .nosto .kaari { fill: none; stroke: var(--water); stroke-width: 1.6; stroke-dasharray: 6 3; }
.askelkuva .nosto .nuolenkarki { fill: none; stroke: var(--water); stroke-width: 1.6; }
.askelkuva .nosto .sarana { stroke: var(--water); stroke-width: 1.2; stroke-dasharray: 1.5 2.5; opacity: .75; }