:root {
  --paperi: #f4efe4;
  --paperi-2: #ebe3d2;
  --kortti: #fbf8f1;
  --muste: #2a2620;
  --muste-2: #5d554a;
  --muste-3: #8a8173;
  --viiva: #d6cbb5;
  --leima: #8f2f25;
  --leima-vaalea: #f1dcd6;
  --sininen: #2f4f6f;
  --vihrea: #4c6b3c;
  --harmaa: #7b746a;
  --oranssi: #a8642a;
  --varjo: 0 1px 2px rgba(60,45,20,.08), 0 4px 14px rgba(60,45,20,.06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --leveys: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paperi: #1d1b18; --paperi-2: #26231f; --kortti: #2a2722;
    --muste: #ece5d8; --muste-2: #bfb5a4; --muste-3: #8f8676; --viiva: #3d3830;
    --leima: #d9826f; --leima-vaalea: #3b2723; --sininen: #8fb2d4; --vihrea: #9cbf88;
    --harmaa: #a79f92; --oranssi: #d9a06a;
    --varjo: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 130px; }
body {
  margin: 0; background: var(--paperi); color: var(--muste);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--leima); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h2 { font-size: 1.45rem; }
:focus-visible { outline: 2px solid var(--leima); outline-offset: 2px; }

/* Yläpalkki */
.ylapalkki {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paperi) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--viiva);
}
.ylapalkki-sisa {
  max-width: var(--leveys); margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.nimike { text-decoration: none; color: var(--muste); display: flex; flex-direction: column; }
.nimike-paa { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.nimike-ala { font-size: .8rem; color: var(--muste-3); }
.paavalikko { display: flex; gap: 4px; }
.paavalikko a {
  text-decoration: none; color: var(--muste-2); padding: 6px 12px; border-radius: 4px;
  font-size: .95rem;
}
.paavalikko a:hover { background: var(--paperi-2); }
.paavalikko a.aktiivinen { background: var(--muste); color: var(--paperi); }

main { max-width: var(--leveys); margin: 0 auto; padding: 24px 16px 80px; outline: none; }
.johdanto { color: var(--muste-2); max-width: 70ch; margin: 0 0 20px; }

/* Aikajanan ohjaimet */
.ohjaimet {
  position: sticky; top: 62px; z-index: 10; background: var(--paperi);
  padding: 10px 0; border-bottom: 1px solid var(--viiva); margin-bottom: 8px;
  display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.vuodet { display: flex; gap: 2px; flex-wrap: wrap; }
.vuodet a {
  font-family: var(--serif); text-decoration: none; color: var(--muste-2);
  padding: 3px 9px; border: 1px solid var(--viiva); border-radius: 3px; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.vuodet a:hover { border-color: var(--muste-2); color: var(--muste); }
.vuodet a.tyhja { opacity: .45; }
.suodattimet { display: flex; gap: 14px; flex-wrap: wrap; font-size: .88rem; color: var(--muste-2); }
.suodattimet label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Aikajana */
.vuosi { position: relative; margin-top: 28px; }
.vuosi-otsikko {
  font-family: var(--serif); font-size: 2rem; color: var(--muste-3); margin: 0 0 8px;
  font-variant-numeric: oldstyle-nums;
}
.janalista { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; }
.janalista::before {
  content: ""; position: absolute; left: 107px; top: 6px; bottom: 6px; width: 2px; background: var(--viiva);
}
.merkinta {
  display: grid; grid-template-columns: 92px 32px 1fr; align-items: start;
  padding: 7px 0; position: relative;
}
.merkinta-pvm {
  font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muste-3); text-align: right;
  padding-top: 2px; white-space: nowrap;
}
.merkinta-piste {
  justify-self: center; margin-top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paperi); border: 2px solid var(--muste-3); position: relative; z-index: 1;
}
.merkinta-runko { min-width: 0; }
.merkinta-teksti { font-weight: 500; }
.merkinta-lisa { font-size: .88rem; color: var(--muste-2); margin-top: 2px; }
.merkinta-linkit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.lappu {
  font-size: .78rem; text-decoration: none; padding: 1px 8px; border-radius: 10px;
  background: var(--paperi-2); color: var(--muste-2); border: 1px solid var(--viiva);
}
.lappu:hover { color: var(--leima); border-color: var(--leima); }

.laji-palvelus .merkinta-piste { border-color: var(--sininen); }
.laji-loma .merkinta-piste { border-color: var(--vihrea); }
.laji-sairaala .merkinta-piste { border-color: var(--oranssi); }
.laji-haavoittuminen .merkinta-piste { background: var(--leima); border-color: var(--leima); }
.laji-kotiutus .merkinta-piste { background: var(--vihrea); border-color: var(--vihrea); }
.laji-konteksti .merkinta-piste { border-style: dashed; border-color: var(--harmaa); }
.laji-konteksti .merkinta-teksti { font-weight: 400; font-style: italic; color: var(--muste-2); }
.laji-haavoittuminen .merkinta-teksti { color: var(--leima); font-weight: 600; }

.merkinta.kirje .merkinta-piste {
  border-radius: 2px; width: 16px; height: 11px; margin-top: 7px; border-color: var(--leima);
  background: var(--kortti);
}
.kirjelinkki {
  display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit;
  background: var(--kortti); border: 1px solid var(--viiva); border-radius: 6px; padding: 8px 10px;
  box-shadow: var(--varjo); max-width: 640px;
}
.kirjelinkki:hover { border-color: var(--leima); }
.kirjelinkki img { width: 48px; height: 64px; object-fit: cover; object-position: top; border-radius: 2px; flex: none; background: var(--paperi-2); }
.kirjelinkki-otsikko { font-family: var(--serif); font-weight: 600; color: var(--muste); }
.kirjelinkki-tiedot { font-size: .85rem; color: var(--muste-2); }

.selite { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--muste-3); margin-top: 6px; }
.selite span { display: inline-flex; align-items: center; gap: 5px; }
.selite i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; display: inline-block; }

/* Listat */
.listaotsikko { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kortti {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--kortti); border: 1px solid var(--viiva); border-radius: 6px; overflow: hidden;
  box-shadow: var(--varjo); transition: transform .12s ease, border-color .12s ease;
}
.kortti:hover { border-color: var(--leima); transform: translateY(-2px); }
.kortti-kuva { aspect-ratio: 4 / 3; background: var(--paperi-2); overflow: hidden; position: relative; }
.kortti-kuva img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.kortti-runko { padding: 10px 12px 12px; }
.kortti-pvm { font-size: .82rem; color: var(--muste-3); font-variant-numeric: tabular-nums; }
.kortti-otsikko { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; margin: 2px 0 4px; }
.kortti-tiedot { font-size: .85rem; color: var(--muste-2); }
.merkit { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.merkki { font-size: .72rem; padding: 1px 7px; border-radius: 3px; background: var(--paperi-2); color: var(--muste-2); }
.merkki.kuori { background: var(--leima-vaalea); color: var(--leima); }
.kuukausi { font-family: var(--serif); color: var(--muste-3); font-size: 1.05rem; margin: 26px 0 10px; border-bottom: 1px solid var(--viiva); padding-bottom: 4px; }
.valitsin { display: flex; gap: 4px; flex-wrap: wrap; }
.valitsin button {
  font: inherit; font-size: .85rem; background: transparent; border: 1px solid var(--viiva);
  color: var(--muste-2); padding: 4px 10px; border-radius: 3px; cursor: pointer;
}
.valitsin button[aria-pressed="true"] { background: var(--muste); color: var(--paperi); border-color: var(--muste); }

/* Aineistosivu */
.murupolku { font-size: .88rem; color: var(--muste-3); margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.murupolku a { color: var(--muste-2); }
.selaus { display: flex; gap: 12px; }
.aineisto-paa { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }
.tietolaatikko {
  background: var(--kortti); border: 1px solid var(--viiva); border-radius: 6px; padding: 14px 16px;
  position: sticky; top: 80px; font-size: .9rem;
}
.tietolaatikko dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.tietolaatikko dt { color: var(--muste-3); }
.tietolaatikko dd { margin: 0; }
.tietolaatikko h3 { font-size: 1rem; margin: 16px 0 6px; }
.pdflista { list-style: none; padding: 0; margin: 0; }
.pdflista li { margin: 4px 0; }
.pdflista a { display: inline-flex; gap: 6px; align-items: baseline; word-break: break-word; }
.pdflista small { color: var(--muste-3); }
.liittyvat { list-style: none; padding: 0; margin: 0; }
.liittyvat li { margin: 6px 0; line-height: 1.35; }
.liittyvat small { color: var(--muste-3); display: block; }
.kuvaus { font-size: 1.02rem; max-width: 70ch; color: var(--muste-2); margin: 0 0 22px; }
.epavarma { color: var(--oranssi); font-size: .85rem; }
.sivu { margin: 0 0 26px; }
.sivu button {
  display: block; padding: 0; border: 1px solid var(--viiva); background: var(--kortti);
  cursor: zoom-in; width: 100%; border-radius: 3px; box-shadow: var(--varjo);
}
.sivu img { display: block; width: 100%; height: auto; border-radius: 3px; }
.sivu figcaption { font-size: .82rem; color: var(--muste-3); margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
.osio-otsikko { font-family: var(--serif); font-size: 1.15rem; margin: 30px 0 12px; padding-top: 14px; border-top: 1px solid var(--viiva); }
.kuoret { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ei-kuorta { font-size: .9rem; color: var(--muste-3); }

/* Katselin */
.katselin { position: fixed; inset: 0; z-index: 100; background: rgba(15,12,8,.94); display: flex; flex-direction: column; }
.katselin[hidden] { display: none; }
.katselin-palkki {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; color: #e9e2d4; font-size: .9rem;
}
.katselin-napit { display: flex; gap: 6px; align-items: center; }
.katselin-napit button, .katselin-napit a {
  font: inherit; background: rgba(255,255,255,.08); color: #f1ebdf; border: 1px solid rgba(255,255,255,.18);
  padding: 4px 10px; border-radius: 3px; cursor: pointer; text-decoration: none;
}
.katselin-napit button:hover, .katselin-napit a:hover { background: rgba(255,255,255,.18); }
.katselin-alue { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; }
.katselin-alue img { max-width: 100%; max-height: calc(100vh - 56px); object-fit: contain; cursor: zoom-in; }
.katselin-alue.zoom { display: block; }
.katselin-alue.zoom img { max-width: none; max-height: none; cursor: zoom-out; }

.huom { padding: 16px; }

@media (max-width: 760px) {
  .aineisto-paa { grid-template-columns: 1fr; }
  .tietolaatikko { position: static; order: -1; }
  .janalista::before { left: 79px; }
  .merkinta { grid-template-columns: 64px 32px 1fr; }
  .merkinta-pvm { font-size: .78rem; white-space: normal; }
  .ohjaimet { position: static; }
  html { scroll-padding-top: 140px; }
}
@media print {
  .ylapalkki, .ohjaimet, .murupolku .selaus { display: none; }
  .aineisto-paa { grid-template-columns: 1fr; }
  .tietolaatikko { position: static; }
  .sivu { break-inside: avoid; }
}

/* Kuvien latausvirheilmoitus */
.kuvavirhe {
  position: sticky; top: 62px; z-index: 15; max-width: var(--leveys); margin: 8px auto 0; padding: 10px 16px;
  background: var(--leima-vaalea); color: var(--leima); border: 1px solid var(--leima); border-radius: 4px;
  font-size: .88rem; word-break: break-word;
}
.kuvavirhe[hidden] { display: none; }
.kuvavirhe code { font-size: .82rem; }

/* Litterointi */
.litterointi {
  background: var(--kortti); border: 1px solid var(--viiva); border-radius: 6px;
  margin: 0 0 26px; box-shadow: var(--varjo);
}
.litterointi summary {
  cursor: pointer; padding: 12px 16px; font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  list-style-position: inside;
}
.litterointi[open] summary { border-bottom: 1px solid var(--viiva); }
.litt-sivut { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; padding: 14px 18px 4px; }
.litt-sivu h3 { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--muste-3); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.litt-sivu p { white-space: pre-line; font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; margin: 0 0 12px; }
.epavarma-merkki { background: var(--leima-vaalea); color: var(--leima); padding: 0 3px; border-radius: 2px; font-family: var(--sans); font-size: .8em; }
.litt-huom { margin: 0; padding: 10px 18px 14px 34px; border-top: 1px dashed var(--viiva); font-size: .85rem; color: var(--muste-2); }
.litt-huom li { margin: 3px 0; }
.merkki.litt { background: color-mix(in srgb, var(--sininen) 15%, transparent); color: var(--sininen); }
@media print { .litterointi { box-shadow: none; } }