/* Julkisen satukirjaston tyyli (8.10.2026, app/seo/stories.ts): sovelluksen paperipohja ja kirjasimet, ei skriptejä. */
:root { color-scheme: light; --paperi: #f3f3ee; --muste: #1a1a19; --himmea: #5f5e57; --viiva: #dcdbd2; --kulta: #e9dcc0; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paperi); color: var(--muste); font: 18px/1.65 "Newsreader", Georgia, "Times New Roman", serif; }
a { color: #5b5a3f; }
.ylä, main, .ala { max-width: 44rem; margin: 0 auto; padding-inline: 1.25rem; }
.ylä { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1rem; font: .95rem/1.4 system-ui, sans-serif; }
.ylä__merkki { font: italic 1.5rem Georgia, serif; color: var(--muste); text-decoration: none; }
.polku { font: .85rem/1.5 system-ui, sans-serif; color: var(--himmea); margin: .5rem 0 1rem; }
h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.15; margin: .75rem 0 .5rem; text-wrap: balance; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 2.25rem 0 .75rem; text-wrap: balance; }
.johdanto { font-size: 1.1rem; }
.tieto { font: .95rem/1.5 system-ui, sans-serif; color: var(--himmea); margin: 0 0 1rem; }
.kansi { position: relative; overflow: hidden; border-radius: 14px; background: #e6e3d6; aspect-ratio: 3 / 2; max-width: 100%; }
.kansi img { position: absolute; }
.kansi__paikka { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kansi__hahmo { right: 4%; bottom: 0; height: 62%; width: auto; }
.kansi__lapsi { left: 5%; bottom: 7%; width: 24%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid #fbfbf8; box-shadow: 0 3px 8px rgba(26, 26, 25, .3); }
.soitin { margin: 1rem 0 1.5rem; padding: .9rem 1rem; border: 1px solid var(--viiva); border-radius: 14px; background: #fbfbf8; }
.soitin figcaption { font: 600 .95rem/1.4 system-ui, sans-serif; margin-bottom: .5rem; }
.soitin audio { width: 100%; }
.teksti p { margin: 0 0 .9em; }
.kehotus { margin: 2.5rem 0; padding: 1.25rem 1.25rem .5rem; border-radius: 16px; background: #fbfbf8; border: 1px solid var(--viiva); }
.kehotus h2 { margin-top: 0; }
.nappi { display: inline-block; padding: .65rem 1.3rem; border-radius: 999px; background: var(--kulta); color: var(--muste); text-decoration: none; font: 600 1rem/1.3 system-ui, sans-serif; }
.kortit { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 1.25rem; }
.kortti a { display: grid; gap: .35rem; text-decoration: none; color: var(--muste); }
.kortti__nimi { font-size: 1.1rem; line-height: 1.25; font-weight: 600; }
.kortti__tieto { font: .85rem/1.4 system-ui, sans-serif; color: var(--himmea); }
.ala { margin-top: 3rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--viiva); font: .85rem/1.6 system-ui, sans-serif; color: var(--himmea); }
.aiheet { padding-left: 1.2rem; columns: 2 14rem; column-gap: 2rem; }
.aiheet li { margin: 0 0 .4rem; break-inside: avoid; }
article > ul { padding-left: 1.3rem; }
article > ul li { margin: .3rem 0; }
/* Puhelinkuva kehotuslaatikossa (8.10.2026): sama kehys kuin etusivulla (app/seo/phones.ts, PHONE_STYLE). */
.puhelin { display: block; width: min(100%, 210px); height: 250px; margin: 0 auto; padding: 7px 7px 0; border-radius: 30px 30px 0 0; background: #1b1a18; overflow: hidden; box-shadow: 0 14px 30px rgba(60, 50, 30, .18); }
.puhelin__naytto { display: block; height: 100%; border-radius: 24px 24px 0 0; overflow: hidden; }
.puhelin img { display: block; width: 100%; height: auto; }
.puhelin--keskelta img { margin-top: -70px; }
.kehotus--kuva { display: grid; gap: .5rem 1.5rem; padding-bottom: 0; overflow: hidden; background: linear-gradient(180deg, #fbfbf8, #f1ecdf); }
.kehotus--kuva .kehotus__teksti { padding-bottom: .75rem; }
@media (min-width: 40rem) { .kehotus--kuva { grid-template-columns: 1fr 210px; align-items: end; } .kehotus--kuva .kehotus__teksti { align-self: center; } }
/* Aihesivun kuva johdannon alla (joulusivut 8.10.2026). */
.aihekuva { margin: 1rem 0 1.5rem; }
.aihekuva img { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
/* Somelinkit yläpalkissa ja alalaidassa (8.10.2026). */
.ylä__oikea { display: flex; align-items: center; gap: .9rem; }
.some { display: inline-flex; gap: 6px; }
.some-link { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--viiva); background: #fbfbf8; color: var(--muste); }
.ala .some { margin-bottom: .75rem; }