/* ===========================================================================
   Hotel Sallavalkea & Resort
   Verkkosivun tyylit. Versio 2, 12.9.2026.

   Kaikki tyylit ovat tässä tiedostossa. HTML:ssä ei ole style-attribuutteja.
   Fontti: Jost, sama kuin talon ilmoituksissa. Tiedostot assets/fonts.
   =========================================================================== */

/* --- 1. Fontit ----------------------------------------------------------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/jost-latin-ext-300-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/jost-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/jost-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/jost-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/jost-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/jost-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/jost-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/jost-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- 2. Tokenit ----------------------------------------------------------
   valittu: paletti on sama kuin talon some-materiaaleissa (musta #0a0a0a,
   valkoinen, vaalea pinta #e7ede8, sinivihreä #8fd6b0). Ei oletus.
   valittu: Jost on talon ilmoitusten fontti. Koordinaatit monospacella,
   koska ne ovat mittalukema, ei otsikko.
   valittu: pillerinapit ovat somen swaippaa-pillerin muoto, kortit 4 px.
   valittu: heron gradientit ovat tekstin luettavuutta varten kuvan päällä,
   eivät koriste. Ei gradienttia tekstissä eikä taustoissa.
   ------------------------------------------------------------------------ */
:root{
  --pohja:#0a0a0a;
  --pohja-kortti:#141414;
  --pohja-vaalea:#e7ede8;
  --teksti-vaalea:#ffffff;
  --teksti-tumma:#101512;
  --korostus:#8fd6b0;
  --korostus-tumma:#2e6b50;

  --himmea-1:rgba(255,255,255,.82);
  --himmea-2:rgba(255,255,255,.66);
  --himmea-3:rgba(255,255,255,.50);
  --viiva:rgba(255,255,255,.14);
  --viiva-vahva:rgba(255,255,255,.24);

  --t-himmea-1:rgba(16,21,18,.78);
  --t-himmea-2:rgba(16,21,18,.64);
  --t-viiva:rgba(16,21,18,.16);

  --reuna:clamp(20px,5vw,72px);
  --osio-y:clamp(64px,7.6vw,116px);
  --osio-y-kevyt:clamp(52px,6.2vw,92px);

  --fontti:'Jost','Futura','Futura PT','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* valittu: numerot ja koordinaatit Jostilla tasalevyisin numeroin, jotta
     sivulla on sama yksi kirjaintyyppi kuin some-materiaaleissa. Monospace
     poistettiin 13.9.2026. Arial jää vain EU-tunnukseen, jonka fontin
     komission ohje määrää. */
  --mono:'Jost','Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* --- 3. Perusta ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;background:var(--pohja);color:var(--teksti-vaalea);
  font-family:var(--fontti);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--korostus);text-decoration:none;}
a:hover{color:var(--teksti-vaalea);}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.025em;line-height:1.04;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:var(--korostus);color:var(--pohja);}
:focus-visible{outline:2px solid var(--korostus);outline-offset:3px;}
.ohita{position:absolute;left:-9999px;top:0;z-index:100;background:var(--korostus);color:var(--pohja);padding:12px 20px;}
.ohita:focus{left:var(--reuna);top:8px;}
.piilo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* --- 4. Toistuva ele: 11px harvennettu versaali -------------------------- */
.label,.osionro,.nappi,.linkkirivi a,.pilleri,.jalki a,.kentta label{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  line-height:1.4;
}
.osionro{display:block;color:var(--korostus);margin-bottom:clamp(18px,2vw,28px);letter-spacing:.26em;}
.vaalea .osionro{color:var(--korostus-tumma);}
.label{color:var(--himmea-3);}
.vaalea .label{color:var(--t-himmea-2);}

/* --- 5. Osiot ------------------------------------------------------------ */
.osio{padding:var(--osio-y) var(--reuna);}
.osio.kevyt{padding-block:var(--osio-y-kevyt);}
.vaalea{background:var(--pohja-vaalea);color:var(--teksti-tumma);}
.vaalea a{color:var(--korostus-tumma);}
.vaalea a:hover{color:var(--teksti-tumma);}
.kortti-pohja{background:var(--pohja-kortti);}

h2{font-size:clamp(30px,3.8vw,54px);max-width:22ch;}
h3{font-size:clamp(21px,1.9vw,28px);letter-spacing:-.015em;}
h4{font-size:clamp(17px,1.35vw,20px);letter-spacing:-.01em;line-height:1.3;}
/* Pikkuotsikko on h3 rakenteeltaan, jotta otsikkotasoissa ei ole hyppyjä,
   mutta kooltaan entinen h4. Ruudunlukija saa ehjän jäsennyksen. */
h3.pikku{font-size:clamp(17px,1.35vw,20px);letter-spacing:-.01em;line-height:1.3;}
.ingressi{font-size:clamp(16px,1.25vw,19px);line-height:1.62;max-width:56ch;color:var(--himmea-1);}
.vaalea .ingressi{color:var(--t-himmea-1);}
.leipa{max-width:52ch;color:var(--himmea-2);}
.vaalea .leipa{color:var(--t-himmea-1);}
.pieni{font-size:13.5px;line-height:1.6;color:var(--himmea-3);}
.vaalea .pieni{color:var(--t-himmea-2);}

.kaksipalstaa{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);gap:clamp(28px,4vw,80px);align-items:start;}
@media (max-width:820px){.kaksipalstaa{grid-template-columns:1fr;}}

/* --- 6. Napit ------------------------------------------------------------ */
.nappi{display:inline-block;padding:14px 26px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-align:center;}
.nappi-1{background:var(--pohja-vaalea);color:var(--teksti-tumma);}
.nappi-1:hover{background:var(--korostus);color:var(--pohja);}
.nappi-2{background:transparent;color:var(--teksti-vaalea);border-color:var(--viiva-vahva);}
.nappi-2:hover{border-color:var(--korostus);color:var(--korostus);}
.vaalea .nappi-1{background:var(--teksti-tumma);color:var(--pohja-vaalea);}
.vaalea .nappi-1:hover{background:var(--korostus-tumma);color:var(--pohja-vaalea);}
.vaalea .nappi-2{color:var(--teksti-tumma);border-color:var(--t-viiva);}
.vaalea .nappi-2:hover{border-color:var(--teksti-tumma);color:var(--teksti-tumma);}
.napit{display:flex;flex-wrap:wrap;gap:12px;}

.pilleri{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--viiva-vahva);color:var(--himmea-2);}
.vaalea .pilleri{border-color:var(--t-viiva);color:var(--t-himmea-2);}
.pillerit{display:flex;flex-wrap:wrap;gap:8px;}

/* --- 7. Yläpalkki ja navigaatio ------------------------------------------ */
.ylapalkki{display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;
  padding:9px var(--reuna);background:var(--korostus);color:var(--pohja);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
@media (max-width:620px){.ylapalkki .osoite{display:none;}}
.ylapalkki a{color:var(--pohja);border-bottom:1px solid rgba(10,10,10,.45);}
.ylapalkki a:hover{color:var(--pohja);border-bottom-color:var(--pohja);}
.ylapalkki .koord{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.12em;}

.navi{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px var(--reuna);background:rgba(10,10,10,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--viiva);}
.navi-logo{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);color:inherit;flex:0 0 auto;}
.navi-logo img{height:clamp(34px,3.4vw,44px);width:auto;}
.navi-logo span{font-size:clamp(10px,.9vw,12.5px);font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--himmea-1);white-space:nowrap;}
.navi-oikea{display:flex;align-items:center;gap:clamp(10px,1.4vw,24px);}
.linkkirivi{display:flex;gap:clamp(10px,1.4vw,22px);}
.linkkirivi a{color:var(--himmea-2);white-space:nowrap;}
.linkkirivi a:hover{color:var(--korostus);}
.linkkirivi a[aria-current="page"]{color:var(--korostus);}
.kielet{display:flex;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.kielet a{color:var(--himmea-3);}
.kielet a[aria-current="true"]{color:var(--teksti-vaalea);}
.navi .nappi{padding:11px 20px;white-space:nowrap;}
/* Logon tekstiosa piilotetaan, kun valikkoon ei muuten mahdu kuusi linkkiä ja kaksi nappia. */
@media (max-width:1560px){.navi-logo span{display:none;}}

.valikkonappi{display:none;background:none;border:1px solid var(--viiva-vahva);border-radius:999px;
  color:var(--teksti-vaalea);padding:10px 18px;cursor:pointer;font-family:inherit;}
/* Valikossa on kuusi linkkiä ja kaksi nappia, joten linkkirivi mahtuu vasta 1280 px:stä ylöspäin. */
@media (max-width:1280px){
  .linkkirivi{display:none;}
  .valikkonappi{display:inline-block;}
  .navi-logo span{display:none;}
  .navi .nappi-2{display:none;}
}
/* Kapealla näytöllä myös sivun oma nappi siirtyy mobiilivalikkoon. */
@media (max-width:620px){.navi [data-cta]{display:none;}}
/* Mobiilivalikko */
.mobiilivalikko{display:none;padding:8px var(--reuna) 26px;background:rgba(10,10,10,.97);
  border-bottom:1px solid var(--viiva);position:sticky;top:var(--navi-korkeus,64px);z-index:39;}
.mobiilivalikko[data-auki="true"]{display:block;}
.mobiilivalikko a{display:block;padding:13px 0;border-bottom:1px solid var(--viiva);
  color:var(--himmea-1);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}
.mobiilivalikko .nappi{display:block;margin-top:18px;border-bottom:0;}
.mobiilivalikko .nappi-1{color:var(--teksti-tumma);letter-spacing:.22em;}
.mobiilivalikko .nappi-1:hover{color:var(--pohja);}

/* --- 8. Hero ------------------------------------------------------------- */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;
  padding:clamp(90px,14vw,180px) var(--reuna) clamp(40px,5vw,72px);overflow:hidden;}
.hero-kuva{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-taivas{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 96%);}
.hero-taivas canvas{position:absolute;inset:0;width:100%;height:100%;}
#taivas-revontulet{mix-blend-mode:screen;filter:blur(11px) saturate(1.28);}
.hero-varjo{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(10,10,10,.94) 0%,rgba(10,10,10,.62) 38%,rgba(10,10,10,.18) 72%,rgba(10,10,10,.42) 100%);}
@media (max-width:720px){
  .hero-kuva{object-position:62% center;}
  .hero-varjo{background:linear-gradient(to top,rgba(10,10,10,.96) 0%,rgba(10,10,10,.80) 42%,rgba(10,10,10,.34) 74%,rgba(10,10,10,.46) 100%);}
}
.hero-varjo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(10,10,10,.74) 0%,rgba(10,10,10,.44) 34%,rgba(10,10,10,.06) 66%,transparent 100%);}
@media (max-width:720px){.hero-varjo::after{background:linear-gradient(to right,rgba(10,10,10,.62) 0%,rgba(10,10,10,.40) 55%,rgba(10,10,10,.18) 100%);}}
.hero-sisalto{position:relative;z-index:3;width:100%;}
.hero-koord{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--korostus);
  margin-bottom:clamp(16px,2vw,26px);animation:fadeIn 1.4s ease both;}
.hero h1{font-size:clamp(38px,6.2vw,100px);letter-spacing:-.032em;max-width:17ch;
  animation:riseIn 1.1s cubic-bezier(.2,.7,.2,1) both;}
.hero .ingressi{margin-top:clamp(20px,2.4vw,34px);max-width:58ch;color:var(--himmea-1);
  animation:fadeIn 1.6s ease .4s both;}
.hero .napit{margin-top:clamp(26px,3vw,42px);animation:fadeIn 1.8s ease .6s both;}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* --- 9. Kortit ----------------------------------------------------------- */
.ruudukko{display:grid;gap:clamp(14px,1.6vw,22px);}
.r-280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.r-320{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.r-220{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.r-240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

.kortti{background:var(--pohja-kortti);border:1px solid var(--viiva);border-radius:4px;
  padding:clamp(24px,2.4vw,38px);display:flex;flex-direction:column;gap:14px;}
.vaalea .kortti{background:rgba(255,255,255,.55);border-color:var(--t-viiva);}
.kortti .leipa{color:var(--himmea-2);max-width:44ch;}
.vaalea .kortti .leipa{color:var(--t-himmea-1);}
.kortti-linkki{margin-top:auto;padding-top:6px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.hinta{font-size:13.5px;color:var(--korostus);letter-spacing:.02em;}
.vaalea .hinta{color:var(--korostus-tumma);}

/* Kuvapaikkamerkki: näkyvä muistutus puuttuvasta valokuvasta */
.kuvapaikka{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(180px,22vw,300px);border:1px dashed var(--viiva-vahva);border-radius:4px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.030) 0 12px,transparent 12px 24px);
  color:var(--himmea-3);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:24px;}
.vaalea .kuvapaikka{border-color:var(--t-viiva);color:var(--t-himmea-2);
  background:repeating-linear-gradient(135deg,rgba(16,21,18,.035) 0 12px,transparent 12px 24px);}
.kuvapaikka.leveä{min-height:clamp(220px,30vw,440px);}

/* --- 10. Koko talo -------------------------------------------------------- */
.talo-tiedot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,2.4vw,40px);margin-top:clamp(30px,3.6vw,54px);
  padding-top:clamp(26px,3vw,42px);border-top:1px solid var(--t-viiva);}
.sisaltyy{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 30px;margin-top:14px;max-width:960px;}
.sisaltyy li{padding-left:20px;position:relative;font-size:15px;color:var(--t-himmea-1);line-height:1.55;}
.sisaltyy li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--korostus-tumma);}
/* Somen aur-teema: minttu pohja ja tumma teksti, sama kuin postauksessa 02 */
.hub{margin-top:clamp(36px,4.4vw,68px);padding:clamp(26px,3vw,46px);
  background:var(--korostus);color:#08120e;border-radius:4px;}
.hub .osionro{color:#08120e;}
.hub h3{margin-bottom:14px;}
.hub .leipa{color:rgba(8,18,14,.82);max-width:64ch;}
.hub .kysymys{margin-top:18px;color:#08120e;font-weight:500;max-width:60ch;}
.hub .nappi{margin-top:20px;background:#08120e;color:var(--korostus);}
.hub .nappi:hover{background:var(--pohja);color:#ffffff;}
.yhteys-rivi{margin-top:16px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.02em;color:var(--himmea-2);}

/* --- 11. Vuodenajat ------------------------------------------------------- */
.vuodenajat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--viiva);border:1px solid var(--viiva);border-radius:4px;overflow:hidden;
  margin-top:clamp(30px,3.6vw,52px);}
@media (max-width:1080px){.vuodenajat{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.vuodenajat{grid-template-columns:1fr;}}
.vuodenaika{background:var(--pohja);padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:9px;}
.vuodenaika .nro{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--korostus);}
.vuodenaika h3{color:var(--teksti-vaalea);}
.vuodenaika p{font-size:14.5px;line-height:1.55;color:var(--himmea-2);margin:0;}

/* --- 12. Askeleet --------------------------------------------------------- */
.askeleet{counter-reset:a;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.2vw,34px);margin-top:clamp(30px,3.6vw,52px);}
.askel{counter-increment:a;border-top:1px solid var(--viiva);padding-top:18px;}
.askel::before{content:counter(a,decimal-leading-zero);display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:11px;letter-spacing:.22em;color:var(--korostus);margin-bottom:12px;}
.askel strong{display:block;font-weight:500;color:var(--teksti-vaalea);margin-bottom:6px;}
.askel p{font-size:14.5px;line-height:1.6;color:var(--himmea-2);margin:0;}

/* --- 14. Matkalista ------------------------------------------------------- */
.matkat{margin-top:clamp(22px,2.6vw,36px);}
.matkat li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--viiva);font-size:15px;color:var(--himmea-1);}
.matkat li span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:14px;color:var(--korostus);white-space:nowrap;}

/* --- 15. Usein kysytyt ---------------------------------------------------- */
.ukk{margin-top:clamp(26px,3vw,44px);max-width:78ch;}
.ukk details{border-bottom:1px solid var(--viiva);}
.ukk summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-size:clamp(16px,1.3vw,19px);color:var(--teksti-vaalea);}
.ukk summary::-webkit-details-marker{display:none;}
.ukk summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--korostus);font-size:20px;line-height:1;}
.ukk details[open] summary::after{content:"–";}
.ukk .vastaus{padding:0 40px 20px 0;color:var(--himmea-2);font-size:15px;line-height:1.66;max-width:62ch;}

/* --- 16. Varaus ja lomake -------------------------------------------------- */
.varaus-polut{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.4vw,40px);margin-top:clamp(28px,3.4vw,48px);}
.polku{background:rgba(255,255,255,.55);border:1px solid var(--t-viiva);border-radius:4px;
  padding:clamp(24px,2.4vw,38px);}
.polku h3{margin-bottom:10px;}
.polku .leipa{color:var(--t-himmea-1);margin-bottom:20px;}
.polku .yhteys{margin-top:18px;font-size:15px;line-height:1.9;}
.polku .yhteys a{color:var(--korostus-tumma);border-bottom:1px solid rgba(46,107,80,.35);}

form{margin-top:clamp(26px,3vw,44px);}
.kentat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2vw,28px);max-width:840px;}
.kentta{display:flex;flex-direction:column;gap:7px;}
.kentta.leveä{grid-column:1/-1;}
.kentta label{color:var(--t-himmea-2);}
.kentta input,.kentta textarea{font-family:inherit;font-size:16px;color:var(--teksti-tumma);
  background:transparent;border:0;border-bottom:1px solid var(--t-viiva);padding:9px 0;border-radius:0;}
.kentta input:focus,.kentta textarea:focus{border-bottom-color:var(--korostus-tumma);}
.kentta textarea{resize:vertical;min-height:96px;line-height:1.6;}
.kiinnostukset{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;}
.kiinnostus{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;border:1px solid var(--t-viiva);background:transparent;
  color:var(--t-himmea-1);cursor:pointer;transition:all .15s;}
.kiinnostus:hover{border-color:var(--teksti-tumma);}
.kiinnostus[aria-pressed="true"]{background:var(--teksti-tumma);border-color:var(--teksti-tumma);color:var(--pohja-vaalea);}
.hunaja{position:absolute;left:-9999px;}
.lahetys{margin-top:clamp(24px,2.6vw,36px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.kiitos{padding:clamp(24px,3vw,40px);background:var(--teksti-tumma);color:var(--pohja-vaalea);border-radius:4px;}

/* --- 17. Vastuullisuus ja EU ---------------------------------------------- */
/* .eu poistettu 12.9.2026, tilalla .eu-lohko ja .eu-tunnus kohdassa 22 */

/* --- 18. Footer ----------------------------------------------------------- */
.jalki{padding:clamp(48px,6vw,88px) var(--reuna) clamp(30px,3.4vw,48px);border-top:1px solid var(--viiva);}
.jalki-yla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(26px,3.4vw,56px);}
.jalki img{height:44px;width:auto;}
.jalki .linkit{display:flex;flex-wrap:wrap;gap:10px 22px;}
.jalki .linkit a{color:var(--himmea-2);}
.jalki .linkit a:hover{color:var(--korostus);}
.jalki .tiedot{font-size:14px;line-height:1.9;color:var(--himmea-2);}
.jalki .tiedot a{color:var(--himmea-2);}
.jalki .some a{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:2.4;}
.jalki .some a:hover{color:var(--korostus);}
.jalki-ala{margin-top:clamp(32px,4vw,60px);padding-top:22px;border-top:1px solid var(--viiva);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:baseline;}
.jalki-ala .koord{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--korostus);}
.jalki-ala .pieni{max-width:64ch;}

/* --- 19. Liikeherkkyys ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}
}

/* --- 20. VAHVISTA-merkinnät ------------------------------------------------
   Nämä ovat tietoja, joita ei ole vahvistettu asiakkaalta. Ne on tarkoitus
   nähdä. Poista sekä merkintä että tämä sääntö, kun tiedot on täytetty.
   KOODARI: hae tiedostosta sana "VAHVISTA" ennen julkaisua. Osumia ei saa jäädä.
   -------------------------------------------------------------------------- */
.vahvista{display:inline-block;padding:1px 7px;border-radius:3px;
  background:rgba(255,196,0,.16);border:1px solid rgba(255,196,0,.55);color:#ffd45e;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;}
.vaalea .vahvista{background:rgba(176,120,0,.12);border-color:rgba(176,120,0,.5);color:#8a6000;}

/* --- 21. Valokuvat -------------------------------------------------------
   Kaikki kuvat ovat talon omia. Samat kuvat ovat käytössä Instagramin,
   LinkedInin ja Facebookin materiaaleissa, jotta ilme on sama kanavasta
   riippumatta.
   ------------------------------------------------------------------------ */
.korttikuva{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;}
/* Korttikaruselli: useampi kuva samassa korttipaikassa, ristihäivytys kolmen sekunnin välein. */
.korttikaruselli{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:4px;}
.korttikaruselli img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;}
.korttikaruselli img.nakyy{opacity:1;}
@media (prefers-reduced-motion:reduce){.korttikaruselli img{transition:none;}}
.osiokuva{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;}
.osiokuva.laaja{aspect-ratio:21/9;margin-top:clamp(28px,3.4vw,48px);}
.hubkuva{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:4px;
  margin-bottom:clamp(22px,2.4vw,34px);}
.kuvakaista{padding:0 var(--reuna);}
.kuvakaista img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:4px;}
@media (max-width:720px){
  .osiokuva.laaja,.hubkuva,.kuvakaista img{aspect-ratio:16/10;}
}

/* --- 22. EU-tunnus ja rahoittajamerkintä -----------------------------------
   Säännöt: EU:n tunnuksen käyttö EU:n ohjelmien yhteydessä 2021–2027 sekä
   maaseutu.fi:n tuensaajan viestintäohje. Teksti "Euroopan unionin
   osarahoittama" kirjoitetaan aina kokonaan, sallitulla fontilla (Arial,
   Verdana), eikä se saa mennä lipun päälle. Lipun ympärillä on suoja-alue.
   Tunnuksen on oltava vähintään yhtä suuri kuin suurin muu logo samassa
   materiaalissa. Tummalla pohjalla lipussa on valkoinen reunus.
   Tätä lohkoa ei saa tyylitellä talon fontilla eikä väreillä.
   -------------------------------------------------------------------------- */
.eu-tunnus{display:inline-flex;align-items:center;gap:.5em;
  font-family:Arial,Verdana,Helvetica,sans-serif;font-weight:400;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--teksti-vaalea);}
.eu-tunnus img{display:block;height:var(--eu-korkeus,44px);width:auto;flex:0 0 auto;}
.eu-tunnus span{font-size:calc(var(--eu-korkeus,44px) * .34);max-width:11em;}
.vaalea .eu-tunnus{color:#003399;}

.eu-lohko{margin-top:clamp(28px,3.4vw,48px);padding:clamp(24px,2.6vw,40px);
  border:1px solid var(--viiva);border-radius:4px;max-width:72ch;}
.eu-lohko .eu-tunnus{--eu-korkeus:64px;}
.eu-lohko h3{margin-top:clamp(20px,2.2vw,30px);}
.eu-lohko .leipa{margin-top:10px;}
.eu-rahoittaja{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  margin-top:clamp(18px,2vw,28px);padding-top:clamp(18px,2vw,28px);border-top:1px solid var(--viiva);}
.eu-rahoittaja .pieni{margin:0;}
/* Elinvoimakeskuksen logon paikka: suositeltu, ei pakollinen. Korkeintaan
   EU-tunnuksen korkuinen, jotta EU-tunnus säilyy suurimpana. */
.logopaikka{display:inline-flex;align-items:center;justify-content:center;height:56px;
  min-width:180px;padding:0 16px;border:1px dashed var(--viiva-vahva);border-radius:4px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--himmea-3);}

.jalki-eu{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;}
.jalki-eu .eu-tunnus{--eu-korkeus:44px;}
.jalki-eu .pieni{max-width:40ch;}
@media (max-width:560px){
  .eu-lohko .eu-tunnus{--eu-korkeus:52px;}
}

/* --- 23. Lisäykset 13.9.2026 --------------------------------------------- */
/* Rahoittajan logo: korkeintaan EU-tunnuksen korkuinen (64 px). */
.evk-logo{height:48px;width:auto;display:block;}
/* Lomakkeen virhetila. */
.virhe{color:#ffd45e;}
/* Alasivut: tietosuojaseloste ja peruutusehdot. */
.alasivu{max-width:68ch;padding:clamp(48px,6vw,88px) var(--reuna);}
.alasivu h1{font-size:clamp(30px,3.8vw,48px);margin-bottom:clamp(20px,2.4vw,32px);}
.alasivu h2{font-size:clamp(20px,1.8vw,26px);margin-top:clamp(28px,3vw,40px);margin-bottom:10px;max-width:none;}
.alasivu p,.alasivu li{color:var(--himmea-1);}
.alasivu ul{list-style:disc;padding-left:1.2em;margin:.4em 0 1em;}
.alasivu li{margin:.3em 0;}
.alasivu .takaisin{display:inline-block;margin-bottom:clamp(20px,2.4vw,32px);}
/* Revontulisviitti: kuva ja teksti rinnakkain, kuva vasemmalla. */
.sviitti{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,3vw,48px);
  align-items:center;margin-top:clamp(28px,3.4vw,48px);padding:clamp(20px,2.2vw,32px);
  background:var(--pohja-kortti);border:1px solid var(--viiva);border-radius:4px;}
.sviitti-kuva{margin:0;}
.sviitti-kuva img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;}
.sviitti-kuva figcaption{margin-top:8px;}
.sviitti-teksti h3{margin:6px 0 12px;}
.sviitti-teksti .ingressi{margin-top:14px;}
.sviitti-teksti .nappi{margin-top:20px;}
@media (max-width:820px){.sviitti{grid-template-columns:1fr;}}

/* --- 24. Galleriat ja suurennos ------------------------------------------- */
.galleria{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(22px,2.6vw,36px);}
.galleria.kolme{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;}
.galleria.nelja{grid-template-columns:repeat(4,minmax(0,1fr));}
.galleria figure{margin:0;}
.galleria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;}
.galleria.kolme img{aspect-ratio:3/4;}
.galleria figcaption{margin-top:6px;}
@media (max-width:720px){.galleria.nelja{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.galleria.kolme{grid-template-columns:repeat(3,minmax(0,1fr));}}
.zoom{cursor:zoom-in;}
.suurennos{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);}
.suurennos[hidden]{display:none;}
.suurennos img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;}
.suurennos-sulje,.suurennos-nuoli{position:absolute;background:rgba(10,10,10,.6);border:1px solid var(--viiva-vahva);
  color:var(--teksti-vaalea);border-radius:999px;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:10px 16px;cursor:pointer;}
.suurennos-sulje{top:16px;right:16px;}
.suurennos-nuoli{top:50%;transform:translateY(-50%);padding:14px 16px;font-size:18px;letter-spacing:0;}
.suurennos-nuoli.edellinen{left:12px;}
.suurennos-nuoli.seuraava{right:12px;}
.suurennos-teksti{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;color:var(--himmea-2);padding:0 60px;}