:root{
  --paper:#F6F0E7;
  --ink:#2C2418;
  --forest:#1F3D36;
  --rust:#9C4A12;
  --cream:#FFF4E0;
  --gold:#D9A441;
  --muted:#5E574C;
  --reuna:#878075;
  --viiva:rgba(44,36,24,.15);
  --leipa:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --otsikko:'Balsamiq Sans','Montserrat',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--leipa);
  font-weight:400;
  font-size:1.125rem;
  line-height:1.55;
}
img,svg{max-width:100%}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.25em}
li{margin-bottom:.4em}
strong,b{font-weight:600}

h1,h2,h3{
  font-family:var(--otsikko);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .5em;
  hyphens:auto;
  overflow-wrap:anywhere;
}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.5rem}

a{color:var(--forest);text-decoration-thickness:2px;text-underline-offset:3px}
.rust a{color:var(--cream)}

:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.rust :focus-visible,.demopalkki :focus-visible,.alatunniste :focus-visible{outline-color:var(--cream)}

.wrap{max-width:46rem;margin:0 auto;padding:0 16px}

/* Demopalkki */
.demopalkki{
  background:var(--ink);
  color:var(--paper);
  font-size:1rem;
  line-height:1.45;
  padding:10px 0;
}
.demopalkki p{margin:0}
.demopalkki strong{color:var(--gold)}

/* Ylätunniste ja kielivalitsin */
.ylatunniste{border-bottom:1px solid var(--viiva)}
.ylatunniste .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.sivunimi{font-family:var(--otsikko);font-weight:700;font-size:1.125rem;color:var(--ink);text-decoration:none;padding:12px 0;display:inline-block}
.kielet{position:relative}
.kielet summary{
  list-style:none;cursor:pointer;
  min-height:48px;padding:10px 18px;
  border:2px solid var(--reuna);border-radius:999px;
  display:flex;align-items:center;gap:6px;
  font-weight:600;white-space:nowrap;
}
.kielet summary::-webkit-details-marker{display:none}
.kielet ul{
  position:absolute;right:0;top:calc(100% + 6px);z-index:1000;
  margin:0;padding:6px;list-style:none;min-width:12rem;
  background:var(--paper);border:2px solid var(--reuna);border-radius:12px;
}
.kielet li{margin:0}
.kielet a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:8px 12px;border-radius:8px;
  color:var(--ink);text-decoration:none;
}
.kielet a:hover{background:var(--cream)}
.kielet a[aria-current="true"]{font-weight:600}

/* Osiot */
.osio{padding:48px 0;border-top:1px solid var(--viiva)}
.rust{background:var(--rust);color:var(--cream)}
.osio.rust{border-top:0}
.osio.cream{background:var(--cream)}
.demo-merkki{
  display:inline-block;
  font-size:1rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);
  margin:0 0 8px;
}
.rust .demo-merkki{color:var(--cream)}
.luonnos{font-size:1rem;color:var(--muted);font-style:italic;font-weight:400}
.rust .luonnos{color:var(--cream)}
.huom{font-size:1rem;color:var(--muted)}
.rust .huom{color:var(--cream)}

/* Napit */
.nappi{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:14px 28px;
  border-radius:999px;border:2px solid var(--forest);
  background:var(--forest);color:var(--paper);
  font-family:var(--leipa);font-size:1.125rem;font-weight:600;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;
  hyphens:auto;overflow-wrap:anywhere;
}
.nappi.toissijainen{background:transparent;color:var(--forest)}
.rust .nappi{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.nappi[aria-disabled="true"]{background:transparent;color:var(--muted);border:2px dashed var(--reuna);cursor:default}

/* Kortit */
.kortti{
  background:var(--paper);
  border:1px solid var(--viiva);
  border-radius:12px;
  padding:24px;
  margin:0 0 24px;
}
.rust .kortti{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.rust .kortti a{color:var(--forest)}
.rust .kortti :focus-visible{outline-color:var(--forest)}
.rust .kortti .luonnos,.rust .kortti .huom,.rust .kortti .demo-merkki{color:var(--muted)}
.rust .kortti .nappi{background:var(--forest);color:var(--paper);border-color:var(--forest)}

/* Kuvapaikka: polaroid */
.kuvapaikka{
  background:#fff;
  border:1px solid var(--viiva);
  padding:12px 12px 48px;
  margin:0 0 24px;
  position:relative;
  transform:rotate(-1.2deg);
}
.kuvapaikka .kuva-ala{
  aspect-ratio:4/3;
  background:repeating-linear-gradient(135deg,#efe6d8 0 14px,#e8dccb 14px 28px);
  display:flex;align-items:center;justify-content:center;
}
.kuvapaikka .kuvateksti{
  position:absolute;left:12px;right:12px;bottom:10px;
  font-weight:600;font-size:1.125rem;color:var(--muted);text-align:center;
}
.kuvapaikka.iso .kuva-ala{aspect-ratio:3/2}

/* B: etusivu */
.osio.hero{border-top:0;padding-bottom:0}
.hero-yla{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:-16px}
.alaotsikko{font-size:1.375rem;font-weight:600;line-height:1.35}
.pikkuhahmo{width:84px;height:84px;flex:0 0 84px;color:var(--forest);transform:rotate(4deg)}
.lupaus{font-size:1.25rem;margin:8px 0 32px}
.lupaus p:first-child{margin-bottom:.4em}
.pitajille{padding:48px 0;margin-top:24px}
.iso-teksti{font-size:1.25rem;font-weight:600;margin-bottom:.4em}
.kuvakelista{list-style:none;padding:0;margin:0 0 .6em}
.kuvakelista li{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.kuvake{width:40px;height:40px;flex:0 0 40px;color:currentColor}
.kuvakelista span{padding-top:6px}

/* C: kartta */
.kartta{height:min(60vh,420px);border:2px solid var(--reuna);border-radius:12px;margin:8px 0 12px;background:#e8e2d6;scroll-margin-top:140px}
.kartta-alla{font-weight:600}
.karttalista{list-style:none;padding:0;margin:0}
.karttalista>li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--viiva);margin:0}
.lista-ikoni{flex:0 0 36px;width:36px;height:36px;margin-top:2px}
.lista-ikoni svg{width:36px;height:36px;display:block}
.ponnahdus strong{display:block;font-weight:600}
.ponnahdus p{margin:.2em 0}
.ponnahdus ul{margin:.3em 0;padding-left:1.1em}
.ponnahdus li{margin:0}
.ponnahdus a{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.leaflet-container{font-family:var(--leipa);font-size:1rem}
.leaflet-popup-content{font-size:1rem;line-height:1.45;margin:14px 44px 10px 16px}
.leaflet-popup-content .huom{font-size:1rem}
.merkki{background:none;border:0}
.merkki svg{width:48px;height:48px;display:block}
.leaflet-touch .leaflet-bar a{width:48px;height:48px;line-height:48px}
.leaflet-container a.leaflet-popup-close-button{width:48px;height:48px;font-size:28px;line-height:44px;color:var(--ink)}
.leaflet-bar a:focus-visible,.leaflet-marker-icon:focus-visible,.leaflet-container a.leaflet-popup-close-button:focus-visible,.leaflet-control-attribution a:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.leaflet-control-attribution{font-size:12px}

/* D: aluekortti */
.aluekortti h3{font-size:1.75rem;margin-top:4px}
.isanta-rivi{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.isanta-rivi p{margin:0}
.isantakuva{flex:0 0 72px;width:72px;height:72px;border-radius:50%;border:2px dashed var(--reuna);background:repeating-linear-gradient(135deg,#efe6d8 0 10px,#e8dccb 10px 20px)}
.isanta-nimi{font-weight:600;font-size:1.25rem}
.pikarivi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px;align-items:start}
.pikarivi .nappi{width:100%;padding:12px 14px}
.pikarivi-solu{display:flex;flex-direction:column;gap:2px}
.pikarivi-huom{text-align:center}
.lupa-huom{margin:4px 0 16px;font-weight:600}
.laatikko{border:2px dashed var(--reuna);border-radius:12px;padding:16px 18px;margin:20px 0}
.laatikko-otsikko{font-weight:600;margin:0 0 .4em}
.paikkateksti{font-weight:600;font-size:1.25rem;color:var(--muted)}
.faktat{margin:20px 0}
.tayttaa{margin:0 0 20px}
.tayttaa>div{padding:10px 0;border-top:1px solid var(--viiva)}
.tayttaa dt{font-weight:600}
.tayttaa dd{margin:0;color:var(--muted)}
.vaunupaikat{margin:20px 0;padding:16px 0;border-top:1px solid var(--viiva)}
.vaunupaikat p{margin-bottom:.3em}
.vaunupaikat .nappi{margin-top:8px}
.valmis-viesti{background:var(--cream);border-radius:12px;padding:20px 18px;margin:24px 0}
.pillerit{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pilleri{
  min-height:48px;padding:10px 18px;border-radius:999px;
  border:2px solid var(--reuna);background:var(--paper);color:var(--ink);
  font-family:var(--leipa);font-size:1.0625rem;font-weight:600;cursor:pointer;
}
.pilleri[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.pilleri[aria-pressed="true"]::before{content:"✓ "}
.tekstiviesti-linkki{display:inline-flex;align-items:center;min-height:48px;margin-left:12px;font-weight:600}
.esikatselu{background:var(--paper);border:2px solid var(--forest);border-radius:12px;padding:14px 16px;margin:16px 0 8px}
.viestiteksti{white-space:pre-line;font-size:1.0625rem}
.minimi{border-style:dashed;border-color:var(--reuna)}
.pikarivi.esimerkki{display:flex;flex-wrap:wrap;gap:8px}
.pikarivi.esimerkki .nappi{width:auto;padding:10px 18px;font-size:1rem;hyphens:manual}
.ruksit{list-style:none;padding:0;margin:0}
.ruksit li{display:flex;align-items:center;gap:10px;min-height:40px;margin:0}
.ruksit li::before{content:"";flex:0 0 24px;width:24px;height:24px;border:2px solid var(--forest);border-radius:6px;background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23F6F0E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
@media (max-width:360px){.pikarivi{grid-template-columns:1fr}}

/* E: isäntä suosittelee */
#suosittelee h3{font-size:1.375rem;margin-top:28px}
#suosittelee h3::first-letter{text-transform:uppercase}
.nuolilinkki{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.nuolilinkki::after{content:" →";white-space:pre}
.kohteet{list-style:none;padding:0;margin:0}
.kohde{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--viiva);margin:0}
.kohde p{margin:0 0 .25em}
.kohde-nimi{font-weight:600;font-size:1.1875rem}
.kohde .kuvake{color:var(--rust)}

/* F: mitä voisimme tehdä yhdessä */
#yhdessa{padding-bottom:0}
.idea h3{font-size:1.5rem}
.idea-merkki{display:inline-block;font-size:1rem;font-weight:600;line-height:1.35;color:var(--forest);border:2px solid var(--forest);border-radius:10px;padding:6px 12px;margin-bottom:12px}
.mallikuva{position:relative;background:#fff;border:2px solid var(--ink);margin:16px 0;padding:14px}
.mallikuva-merkki{display:inline-block;font-size:1rem;font-weight:600;color:var(--paper);background:var(--ink);padding:2px 10px;margin:0 0 10px}
.mainos{aspect-ratio:210/74;min-height:0;display:flex;flex-direction:column;container-type:inline-size}
.mainos-sisalto{display:flex;gap:12px;align-items:stretch;flex:1}
.mainos-teksti{flex:1;min-width:0}
.mainos-teksti p{margin:0 0 4px}
.mainos-nimi{font-family:var(--otsikko);font-weight:700;font-size:1.25rem;line-height:1.2;color:var(--forest)}
.mainos-viesti{font-size:1rem;line-height:1.35}
.mainos-kielet{font-weight:600;font-size:1rem;letter-spacing:.04em;color:var(--forest)}
.mainos-pieni{font-size:1rem;color:var(--muted)}
.mainos-qr{flex:0 0 72px;width:72px;height:72px;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;color:var(--muted);align-self:flex-start}
@media (max-width:40rem){.mainos{aspect-ratio:auto}.mainos-qr{flex-basis:52px;width:52px;height:52px}}
.yokortti{max-width:22rem;transform:rotate(1deg);background:var(--cream);border-color:var(--forest)}
.yokortti-otsikko{font-family:var(--otsikko);font-weight:700;font-size:1.5rem;color:var(--forest);margin:0 0 4px}
.yokortti-teksti{font-weight:600;margin:0}
.ehdotukset{margin-bottom:24px}
.vaatii{padding:48px 0;margin-top:24px}
.vaatii h3{margin-top:24px}
.vaatii h3:first-child{margin-top:0}

#nappi-lahiseutu{margin:0 0 16px}
.lipas-lista{margin:16px 0 0;border-top:1px solid var(--viiva)}
.lipas-lista summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer;padding:8px 0}
.lipas-lista ul{margin:4px 0 0;padding-left:1.1em}
.lipas-lista li{font-size:1rem}

.aurinko{display:flex;align-items:center;gap:14px;font-weight:600;margin:0 0 20px}
.aurinko .kuvake{color:var(--rust)}

/* Alatunniste */
.alatunniste{background:var(--forest);color:var(--paper);padding:32px 0;font-size:1rem}
.alatunniste a{color:var(--paper);display:inline-block;padding:12px 0}
.alatunniste p{margin:0 0 .5em}

@media (min-width:48rem){
  h1{font-size:3.25rem}
  .osio{padding:64px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}