:root{
--tausta:#F9F8F6; --metsa:#14532D; --grafiitti:#1E293B; --messinki:#8C6B3F;
--serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
--sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tausta);color:var(--grafiitti);font-family:var(--sans);font-size:17px;line-height:1.72}
h1,h2,h3,h4{font-family:var(--serif);color:var(--metsa);font-weight:600;line-height:1.22}
h1{font-size:2.25rem;margin:.2em 0 .5em}
h2{font-size:1.55rem;margin:1.9em 0 .6em;padding-top:.5em;border-top:1px solid rgba(140,107,63,.45)}
h3{font-size:1.2rem;margin:1.4em 0 .4em;color:var(--grafiitti)}
a{color:var(--metsa);text-decoration:none;border-bottom:1px solid rgba(140,107,63,.55)}
a:hover{color:#0b3a1f}
p{margin:0 0 1em}
.ohita{position:absolute;left:-999px}
.ohita:focus{left:8px;top:8px;background:#fff;padding:8px;border:1px solid var(--metsa);z-index:99}
main{max-width:900px;margin:0 auto;padding:2.4rem 1.2rem 3rem}
img{max-width:100%;height:auto;display:block;border:1px solid rgba(140,107,63,.35)}
figure{margin:1.6em 0}
figcaption{font-size:.86rem;color:#5b6472;margin-top:.5em;font-family:var(--serif)}
/* ---- monogrammi ---- */
.monogrammi{width:36px;height:36px;position:relative;display:inline-block;flex:0 0 36px}
.monogrammi::before{content:"";position:absolute;top:1px;left:0;right:0;height:13px;background:var(--metsa);clip-path:polygon(50% 0,100% 100%,0 100%)}
.monogrammi::after{content:"";position:absolute;bottom:3px;left:5px;right:5px;height:15px;border-bottom:2px solid var(--messinki);
background:linear-gradient(var(--metsa),var(--metsa)) 2px 0/4px 100% no-repeat,
linear-gradient(var(--metsa),var(--metsa)) 50% 0/4px 100% no-repeat,
linear-gradient(var(--metsa),var(--metsa)) calc(100% - 2px) 0/4px 100% no-repeat}
/* ---- vitriini-header ---- */
header.vitriini{position:sticky;top:0;z-index:40;background:var(--tausta);border-top:1px solid var(--messinki);
border-bottom:1px solid rgba(140,107,63,.35);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.55rem 1.2rem}
.merkki{display:flex;align-items:center;gap:.6rem;border-bottom:none}
.merkki-teksti{font-family:var(--serif);font-size:1.06rem;letter-spacing:.16em;color:var(--metsa)}
.vt-kytkin{display:none}
.vt-nappi{display:none;font-family:var(--serif);border:1px solid var(--metsa);padding:.32rem .8rem;cursor:pointer;color:var(--metsa)}
.hylly{display:flex;gap:.5rem;margin-left:auto;align-items:stretch;padding:.35rem .5rem;border-radius:3px;
background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.16));
border:1px solid rgba(140,107,63,.28);position:relative;overflow:visible}
.hylly::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;
background:linear-gradient(105deg,rgba(255,255,255,.6) 0 18%,rgba(255,255,255,0) 42%)}
.vitriini-levy{position:relative}
.vitriini-levy>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;
border:1px solid rgba(30,41,59,.45);background:rgba(249,248,246,.85);padding:.3rem .6rem;border-radius:2px;
font-family:var(--serif);font-size:.9rem;position:relative;z-index:1}
.vitriini-levy>summary::-webkit-details-marker{display:none}
.indeksi{font-family:var(--serif);font-size:.72rem;border:1px solid var(--messinki);padding:0 .28rem;color:var(--messinki)}
.vitriini-levy[open]>summary{background:radial-gradient(ellipse at 50% 130%,rgba(20,83,45,.22),rgba(249,248,246,.9) 70%);
box-shadow:inset 0 -2px 0 var(--metsa)}
.vitriini-levy[open]>summary .indeksi{background:var(--metsa);color:#F9F8F6;border-color:var(--metsa)}
.vitriini-levy:focus-within>summary{border-color:var(--metsa)}
.hylly-paneeli{position:absolute;right:0;top:calc(100% + .5rem);min-width:250px;background:var(--tausta);
border:1px solid rgba(140,107,63,.4);border-top:2px solid var(--messinki);padding:.7rem;z-index:60;
box-shadow:0 10px 26px rgba(30,41,59,.14)}
.kortit{display:flex;flex-direction:column;gap:.35rem}
.kortti{display:block;border:1px solid rgba(140,107,63,.35);background:#fff;padding:.45rem .7rem;font-family:var(--serif);font-size:.95rem}
.kortti:hover{background:#f1efe9}
.kortti.nykyinen{border-left:4px solid var(--metsa);background:#eef2ee}
/* ---- sankari ---- */
.sankari{padding:2.6rem 0 1.2rem;border-bottom:1px solid rgba(140,107,63,.45)}
.sankari .johdanto{font-family:var(--serif);font-size:1.18rem;color:#3b4757;max-width:62ch}
.nappi{display:inline-block;font-family:var(--serif);background:var(--metsa);color:#F9F8F6;border:none;padding:.7rem 1.35rem;cursor:pointer;font-size:1rem}
.nappi:hover{background:#0b3a1f;color:#fff}
.nappi-pieni{padding:.4rem .9rem;font-size:.9rem}
/* ---- taulukko ---- */
.taulukko-kotelo{overflow-x:auto;margin:1.6em 0}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
th,td{border:1px solid rgba(140,107,63,.4);padding:.6rem .7rem;text-align:left;vertical-align:top}
th{background:#eef2ee;font-family:var(--serif);color:var(--metsa)}
tbody tr:nth-child(even){background:rgba(255,255,255,.6)}
/* ---- valilehdet ---- */
.valilehdet{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid rgba(140,107,63,.45);margin:1.2em 0}
.valilehti{font-family:var(--serif);border:1px solid rgba(140,107,63,.4);border-bottom:none;background:rgba(255,255,255,.5);padding:.5rem .85rem;cursor:pointer;font-size:.95rem;color:var(--grafiitti)}
.valilehti[aria-selected="true"]{background:var(--metsa);color:#F9F8F6}
.valilehti-paneeli[hidden]{display:none}
.valilehti-paneeli{border:1px solid rgba(140,107,63,.4);border-top:none;padding:1rem 1.1rem;background:rgba(255,255,255,.55)}
/* ---- UKK ---- */
details.ukk{border:1px solid rgba(140,107,63,.4);background:#fff;margin:0 0 .5rem;padding:.5rem .8rem}
details.ukk>summary{cursor:pointer;font-family:var(--serif);color:var(--metsa)}
/* ---- lomake ---- */
.lomake{max-width:560px}
.lomake label{display:block;font-family:var(--serif);margin:.9rem 0 .25rem}
.lomake input,.lomake textarea{width:100%;padding:.55rem;border:1px solid rgba(140,107,63,.5);background:#fff;font-family:var(--sans);font-size:1rem}
.lomake textarea{min-height:130px}
.nootti{font-size:.88rem;color:#5b6472}
/* ---- evästeet ---- */
.evaste-palkki{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#1E293B;color:#F9F8F6;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;flex-wrap:wrap}
.evaste-palkki p{margin:0;font-size:.92rem;max-width:70ch}
.evaste-palkki .nappi{background:#F9F8F6;color:#14532D}
/* ---- footer ---- */
.sivunloppu{background:#1E293B;color:#E7E4DE;margin-top:3rem;border-top:3px solid var(--messinki)}
.kartta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.4rem;max-width:1000px;margin:0 auto;padding:2.2rem 1.2rem 1rem}
.kartta-sarake h3{color:#F9F8F6;font-size:1rem;margin:0 0 .5rem;border-bottom:1px solid rgba(140,107,63,.6);padding-bottom:.25rem}
.kartta-sarake ul{list-style:none;margin:0;padding:0}
.kartta-sarake li{margin:.22rem 0}
.kartta-sarake a{color:#CBBFA8;border-bottom:none;font-size:.92rem}
.kartta-sarake a:hover{color:#F9F8F6;text-decoration:underline}
.sivunloppu-alatunniste{max-width:1000px;margin:0 auto;padding:1rem 1.2rem 2rem;border-top:1px solid rgba(140,107,63,.4);font-size:.9rem}
.sivunloppu-alatunniste a{color:#CBBFA8;border-bottom:none}
.pieni{font-size:.8rem;color:#9aa3ae}
.huomio{border-left:4px solid var(--messinki);background:rgba(140,107,63,.07);padding:.9rem 1.1rem;margin:1.4em 0;font-size:.96rem}
/* ---- mobiili ---- */
@media(max-width:760px){
.vt-nappi{display:inline-block;margin-left:auto}
.hylly{display:none;flex-direction:column;width:100%;margin-left:0;order:5}
.vt-kytkin:checked ~ .hylly{display:flex}
.vt-kytkin:checked ~ .vt-nappi{background:var(--metsa);color:#F9F8F6}
.hylly-paneeli{position:static;min-width:0;box-shadow:none;background:rgba(255,255,255,.7)}
.vitriini-levy{width:100%}
.vitriini-levy>summary{justify-content:flex-start}
h1{font-size:1.7rem}
main{padding:1.6rem 1rem 2.4rem}
}