@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fontit/fira-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fontit/fira-sans-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fontit/lexend-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --valkoinen: #ffffff;
  --muste: #1c2024;
  --karmiini: #b1243b;
  --tumma: #55101d;
  scrollbar-gutter: stable;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--valkoinen);
  color: var(--muste);
  font-family: "Fira Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: Lexend, Arial, sans-serif;
  font-weight: 600;
  text-wrap: balance;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--karmiini);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.nw {
  white-space: nowrap;
}

.ohita {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 3;
  padding: 12px 16px;
  background: var(--muste);
  color: var(--valkoinen);
  font-size: 15px;
}
.ohita:focus {
  top: 16px;
}

.piilo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

strong,
em {
  font-weight: 600;
  font-style: normal;
}

.sisus {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 32px;
}

.yla {
  border-bottom: 1px solid var(--muste);
}
.yla .sisus {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}
.yla .logo {
  flex: none;
  display: block;
  padding-block: 12px;
}
.yla .logo img {
  width: 220px;
}
.yla nav {
  display: flex;
  gap: 28px;
  font-size: 15px;
}
.yla nav a {
  color: var(--muste);
  text-decoration: none;
  padding-block: 12px;
}
.yla nav .yla-pesakirja {
  font-weight: 600;
}

.artikkeli {
  padding-bottom: 32px;
}
.polku {
  font-size: 15px;
  margin: 32px 0 8px;
}
.polku a {
  color: var(--muste);
}
h1 {
  font-size: 38px;
  line-height: 1.15;
  max-width: 22em;
  margin: 0 0 16px;
}
.tiedot {
  font-size: 15px;
  line-height: 1.5;
  max-width: 48em;
  margin: 0 0 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--muste);
}

.osio {
  display: grid;
  grid-template-columns: minmax(0, 34em) minmax(0, 360px);
  column-gap: 56px;
  align-items: start;
}
.osio + .osio {
  margin-top: 40px;
}
.teksti h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.teksti p,
.teksti ul,
.teksti ol {
  margin: 0 0 16px;
}
.teksti ul,
.teksti ol {
  padding-left: 1.25em;
}
.teksti li {
  margin-bottom: 8px;
}
.teksti a {
  text-decoration-line: underline;
}

a.ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 3px;
  margin-left: 3px;
  vertical-align: 0.3em;
  border: 1px solid var(--karmiini);
  color: var(--karmiini);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
a.ref:focus-visible {
  outline-color: currentColor;
}

.reuna {
  border-left: 1px solid var(--muste);
  padding-left: 16px;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
}
.reuna ul,
.luettelo {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reuna li,
.luettelo li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.nro {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 3px;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reuna .nro {
  border: 1px solid var(--karmiini);
  color: var(--karmiini);
}

.taulukko {
  overflow-x: auto;
  margin: 0 0 24px;
}
.taulukko table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.5;
}
.taulukko th,
.taulukko td {
  text-align: left;
  vertical-align: top;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--muste);
  font-variant-numeric: tabular-nums;
}
.taulukko th {
  font-weight: 600;
  border-bottom-width: 2px;
}

.kehote {
  max-width: 34em;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--muste);
}
.kehote p {
  margin: 0 0 16px;
}
.kehote .merkinta {
  font-size: 15px;
  margin-bottom: 4px;
}
.kehote .kehote-otsikko {
  font-family: Lexend, Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  text-wrap: balance;
  margin-bottom: 8px;
}
.nappi {
  display: inline-block;
  padding: 14px 28px;
  background: var(--muste);
  color: var(--valkoinen);
  font-weight: 600;
  text-decoration: none;
}
.nappi:focus-visible {
  outline-color: var(--muste);
}
.kehote .pieni {
  font-size: 15px;
  margin: 8px 0 0;
}

.lahteet {
  background: var(--tumma);
  color: var(--valkoinen);
  padding-block: 64px;
  font-size: 15px;
  line-height: 1.5;
}
.lahteet h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.lahteet p {
  max-width: 48em;
  margin: 0 0 24px;
}
.lahteet a {
  color: var(--valkoinen);
}
.luettelo {
  max-width: 48em;
}
.luettelo .nro {
  background: var(--valkoinen);
  color: var(--tumma);
}

.ala {
  background: var(--muste);
  color: var(--valkoinen);
  font-size: 15px;
  line-height: 1.6;
}
.ala .sisus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  justify-content: space-between;
  padding-block: 32px 48px;
}
.ala a {
  color: var(--valkoinen);
}

@media (hover: hover) and (pointer: fine) {
  .yla nav a:hover,
  .nappi:hover {
    text-decoration: underline;
  }
}

@media (max-width: 760px) {
  .sisus {
    padding-inline: 16px;
  }
  .yla .logo img {
    width: 160px;
  }
  h1 {
    font-size: 28px;
  }
  .osio {
    grid-template-columns: minmax(0, 1fr);
  }
  .reuna {
    margin-top: 8px;
  }
}

.kuvakaista {
  position: relative;
  background: var(--muste);
}
.kuvakaista img {
  width: 100%;
  object-fit: cover;
  object-position: var(--kohde-levea);
}
.etusivukaista img {
  height: 600px;
  opacity: 0.85;
}
.keskuskaista img {
  height: 360px;
}
.kuvateksti {
  font-size: 15px;
  line-height: 1.5;
  margin-block: 8px 0;
}
.kuvateksti a {
  color: var(--muste);
}

.hakukortti {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 32px));
  background: var(--valkoinen);
  padding: 40px 40px 32px;
}
.hakukortti h1 {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 24px;
  text-align: center;
}
.haku {
  display: flex;
  gap: 8px;
}
.ehdotuskentta {
  position: relative;
  flex: 1;
}
.haku input {
  width: 100%;
  font: inherit;
  font-size: 22px;
  padding: 16px 20px;
  border: 2px solid var(--muste);
  border-radius: 0;
  background: var(--valkoinen);
  color: var(--muste);
}
.haku button {
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--muste);
  color: var(--valkoinen);
  cursor: pointer;
}
.haku button:focus-visible {
  outline-color: var(--muste);
}
.ehdotukset {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--valkoinen);
  border: 2px solid var(--muste);
  border-top: 0;
  text-align: left;
}
.ehdotukset li {
  padding: 12px 20px;
  line-height: 1.4;
  cursor: pointer;
}
.ehdotukset li[aria-selected="true"] {
  background: var(--muste);
  color: var(--valkoinen);
}
.esimerkit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
}
.esimerkit a {
  display: inline-block;
  padding-block: 11px;
  color: var(--muste);
}

.ryhmat {
  padding-block: 80px 72px;
}
.ryhmat > h2,
.lahdeosio h2,
.tekijat h2,
.etusivun-kehote h2 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 28px;
}

.sarakkeet {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 48px 32px;
}
.sarake {
  grid-column: span 2;
  border-top: 2px solid var(--muste);
  padding-top: 16px;
}
.sarake.laaja {
  grid-column: span 3;
}
.sarake.laaja ul {
  columns: 2 13rem;
  column-gap: 32px;
}
.sarake h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.sarake ul,
.aihe ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sarake li {
  margin-bottom: 12px;
}

.sarake.laaja li {
  break-inside: avoid;
  margin-bottom: 0;
  padding-bottom: 12px;
}

.lahdeosio {
  background: var(--tumma);
  color: var(--valkoinen);
  padding-block: 80px;
}
.lahdeosio .palsta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: 56px;
  align-items: start;
}
.naytte p {
  margin: 0 0 16px;
}
.naytte p:first-child {
  font-size: 22px;
  line-height: 1.6;
}
.lahdeosio a {
  color: var(--valkoinen);
}
.lahdeosio a.ref {
  border-color: var(--valkoinen);
}
.keskuksen-kehote {
  max-width: 34em;
  margin-bottom: 64px;
}
.lahdeosio .reuna {
  border-left-color: var(--valkoinen);
}
.lahdeosio .reuna .nro {
  border-color: var(--valkoinen);
  color: var(--valkoinen);
}

.pesakirja-osio {
  padding-top: 72px;
}
.etusivun-kehote {
  max-width: 40em;
  margin-top: 0;
}
.toiminnot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.toiminnot .toissijainen {
  padding-block: 12px;
}

.tekijat {
  padding-block: 56px 80px;
}
.tekijat p {
  max-width: 36em;
  margin: 0 0 16px;
}

.keskus h1,
.aiheet-sivu h1,
.haku-sivu h1 {
  font-size: 38px;
  line-height: 1.15;
  margin: 40px 0 24px;
}
.artikkelilista,
.tulokset {
  list-style: none;
  margin: 0 0 64px;
  padding: 0;
  max-width: 48em;
}
.artikkelilista li,
.tulokset li {
  border-top: 1px solid var(--muste);
  padding-block: 20px;
}
.artikkelilista h2,
.tulokset h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.artikkelilista h2 a,
.tulokset h2 a {
  text-decoration: none;
}
.artikkelilista p,
.tulokset p {
  margin: 0;
}
.tulokset mark {
  background: none;
  color: inherit;
  font-weight: 600;
}
.aiheet-sivu {
  padding-bottom: 72px;
}
.aiheet-ruudukko {
  columns: 2;
  column-gap: 56px;
}
.aihe {
  break-inside: avoid;
  margin-bottom: 56px;
}
.aihe h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
}
.aihe h2 a {
  color: var(--muste);
  text-decoration: none;
}
.aihe .maara {
  font-size: 15px;
  margin: 4px 0 16px;
}
.aihe li {
  margin-bottom: 12px;
}

.otsikkokaista {
  display: grid;
  overflow: clip;
}
.otsikkokaista > picture,
.otsikkokaista > .sisus {
  grid-area: 1 / 1;
}
.otsikkokaista > picture {
  display: block;
  position: relative;
  min-height: 360px;
}
.otsikkokaista img {
  position: absolute;
  inset: 0;
  height: 100%;
}
.otsikkokaista > .sisus {
  position: relative;
  z-index: 0;
  align-self: end;
  width: 100%;
  padding-top: 120px;
}

.otsikkokortti {
  position: relative;
  padding-block: 24px;
}
.otsikkokortti::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px -100vw 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--valkoinen) 88%, transparent) 80px, var(--valkoinen));
}
.otsikkokortti .polku {
  margin-top: 0;
}
.otsikkokortti h1 {
  margin: 0 0 12px;
}
.otsikkokortti > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.otsikkokaista {
  margin-bottom: 40px;
}
.lahteet .kuvalahde {
  margin: 32px 0 0;
}

.tarjous {
  max-width: 34em;
  margin-top: 32px;
  padding-block: 16px;
  border-top: 1px solid var(--muste);
  border-bottom: 1px solid var(--muste);
}
.tarjous p {
  margin: 0;
}
.tarjous .merkinta {
  font-size: 15px;
}
.tarjous .tarjous-toiminto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 12px;
}
.tarjous .pieni {
  font-size: 15px;
}
.haku-sivu .haku {
  max-width: 760px;
}
.hakutila {
  font-size: 15px;
  margin: 16px 0 8px;
}

.tietoa,
.puuttuu {
  padding-bottom: 72px;
}
.tietoa h1,
.puuttuu h1 {
  font-size: 38px;
  line-height: 1.15;
  margin: 40px 0 24px;
}
.tietoa h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 40px 0 12px;
}
.tietoa p,
.tietoa ul,
.puuttuu p {
  max-width: 40em;
  margin: 0 0 16px;
}
.kuvaluettelo {
  padding-left: 1.25em;
}
.kuvaluettelo li {
  margin-bottom: 8px;
}
.puuttuu .haku {
  max-width: 760px;
  margin-bottom: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .ehdotukset li:hover {
    background: var(--muste);
    color: var(--valkoinen);
  }
  .artikkelilista h2 a:hover,
  .tulokset h2 a:hover,
  .aihe h2 a:hover {
    text-decoration: underline;
  }
}

@media (max-width: 760px) {
  .kuvakaista img {
    object-position: var(--kohde-kapea);
  }
  .etusivukaista img {
    height: 520px;
  }
  .keskuskaista img {
    height: 240px;
  }
  .otsikkokaista > picture {
    min-height: 200px;
  }
  .otsikkokaista > .sisus {
    padding-top: 96px;
  }
  .otsikkokortti {
    padding-block: 16px;
  }
  .otsikkokortti::before {
    top: -56px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--valkoinen) 88%, transparent) 56px, var(--valkoinen));
  }
  .hakukortti {
    padding: 24px 16px;
  }
  .hakukortti h1,
  .tietoa h1,
  .puuttuu h1,
  .keskus h1,
  .aiheet-sivu h1,
  .haku-sivu h1 {
    font-size: 28px;
  }
  .haku {
    flex-direction: column;
  }
  .haku input {
    font-size: 18px;
  }
  .haku button {
    padding: 14px;
  }
  .aiheet-ruudukko {
    columns: 1;
  }
  .sarakkeet,
  .lahdeosio .palsta {
    grid-template-columns: minmax(0, 1fr);
  }
  .sarakkeet {
    gap: 32px;
  }
  .sarake,
  .sarake.laaja {
    grid-column: auto;
  }
  .lahdeosio .reuna {
    margin-top: 16px;
  }
  .ryhmat {
    padding-block: 56px 48px;
  }
}