:root{--tausta:#fbf8f3;--pinta:#f1eae0;--teksti:#2b2118;--himmea:#6b5a4a;--korostus:#a8432a;--korostus-teksti:#ffffff;--reunus:#e3d8c9}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tausta);color:var(--teksti);font:17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
h1,h2,h3{font-family:Georgia, "Times New Roman", serif;font-weight:700;letter-spacing:normal;line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.8rem,5vw,2.6rem)}
h2{font-size:1.45rem;margin-top:2.2em}
h3{font-size:1.1rem}
p{margin:0 0 1.1em}
a{color:var(--korostus)}
img{max-width:100%;height:auto;display:block}
.sisalto{max-width:960px;margin:0 auto;padding:0 20px}
header.ylapalkki{border-bottom:1px solid var(--reunus)}
header.ylapalkki .sisalto{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:16px}
.nimi{font-family:Georgia, "Times New Roman", serif;font-weight:700;font-size:1.15rem;color:var(--teksti);text-decoration:none}
.logo img{display:block;height:44px;width:auto;max-width:220px;object-fit:contain}
nav.valikko a{margin-left:18px;color:var(--teksti);text-decoration:none}
nav.valikko a:hover{color:var(--korostus)}
.hero{background:linear-gradient(160deg, #f1e4d3 0%, #fbf8f3 75%);padding:56px 0}
.hero .sisalto{display:grid;gap:32px;align-items:center}
.hero p{color:var(--himmea);max-width:620px;margin-bottom:1.4em}
.hero img{border-radius:10px;width:100%}
@media (min-width:860px){.hero .sisalto{grid-template-columns:1.1fr 1fr}}
.nappi{display:inline-block;background:var(--korostus);color:var(--korostus-teksti);padding:12px 22px;border-radius:6px;text-decoration:none;font-weight:600;border:0;font-size:1rem;cursor:pointer}
.nappi[disabled]{opacity:.55;cursor:not-allowed}
.murupolku{font-size:.9rem;color:var(--himmea);padding-top:16px}
.murupolku ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.murupolku li+li:before{content:"›";margin-right:6px}
main.sisalto{padding-top:48px;padding-bottom:80px}
main>h1{margin-bottom:.8em}
.kortit{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0;margin:20px 0 0;list-style:none}
.kortit li{background:var(--pinta);border:1px solid var(--reunus);border-radius:10px;padding:18px}
.kortit li img{border-radius:6px;margin:-4px 0 14px;aspect-ratio:3/2;object-fit:cover;width:100%}
.kortit a{font-weight:600;text-decoration:none;font-size:1.05rem}
.kortit p{margin:.5em 0 0;color:var(--himmea);font-size:.95rem}
.kuva{margin:28px 0}
.kuva img{border-radius:10px;width:100%}
.ukk{margin-top:8px}
.ukk details{border-bottom:1px solid var(--reunus);padding:14px 0}
.ukk summary{cursor:pointer;font-weight:600}
.ukk details p{margin:.7em 0 0}
.yhteys{background:var(--pinta);border:1px solid var(--reunus);border-radius:10px;padding:24px;margin-top:56px}
.yhteys h2{margin-top:0}
.lomake{display:grid;gap:14px;max-width:560px;margin-top:12px}
.lomake label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.lomake input,.lomake textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--reunus);border-radius:6px;background:var(--tausta);color:var(--teksti)}
.lomake .huom{color:var(--himmea);font-size:.9rem;margin:0}
.lomake button{justify-self:start}
.ansa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
footer{border-top:1px solid var(--reunus);color:var(--himmea);font-size:.9rem;padding:32px 0}
footer a{color:var(--himmea)}
.esikatselu{position:sticky;top:0;z-index:10;background:#b42318;color:#fff;text-align:center;padding:8px;font:600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
@media (max-width:600px){nav.valikko a{margin:0 14px 0 0}.hero{padding:36px 0}main.sisalto{padding-top:32px;padding-bottom:56px}}

@keyframes nousu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hiipu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
.hero .sisalto>div{animation:nousu .7s ease-out both}
.hero img{animation:hiipu .9s ease-out both}
.nappi,.kortit li,nav.valikko a{transition:transform .2s ease,box-shadow .2s ease,color .2s ease,filter .2s ease}
.nappi:hover{transform:translateY(-1px);filter:brightness(1.06)}
.kortit li{overflow:hidden}
.kortit li img{transition:transform .5s ease}
.kortit li:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.kortit li:hover img{transform:scale(1.03)}
@supports (animation-timeline:view()){main h2,.kortit li,.kuva,.yhteys{animation:nousu linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}
}