/* WordPressin ja design-systemin silta.
   pesola.css pidetään identtisenä demon kanssa, joten kaikki WP-kohtainen
   (valikkolistat, admin-palkki, editorin lohkot) asuu täällä. */

/* Valikko: wp_nav_menu tuottaa ul/li, demo odottaa suoria <a>-elementtejä */
nav .links ul{list-style:none;margin:0;padding:0;display:flex;
  gap:clamp(14px,2vw,32px);align-items:center;}
nav .links li{margin:0;padding:0;}
nav .links .current-menu-item > a{opacity:1;color:var(--accent-deep);}
@media(max-width:900px){
  nav .links ul{flex-direction:column;align-items:flex-start;gap:4px;width:100%;}
  nav .links li{width:100%;}
}

/* Logo: varmistus myös jos jokin lisäosa tuo oman .custom-logo-kuvansa.
   Korkeus tulee aina navilta, ei kuvatiedoston omista mitoista. */
nav .brand img,
nav .brand .brand-logo,
nav .brand img.custom-logo{height:46px!important;width:auto!important;max-width:none;
  transition:height .4s;}
nav.scrolled .brand img,
nav.scrolled .brand .brand-logo{height:40px!important;}
@media(max-width:520px){ nav .brand img,nav .brand .brand-logo{height:38px!important;} }

/* Footerin linkkilistat */
.fcol ul{list-style:none;margin:0;padding:0;}
.fcol li{margin:0;}
.fcol li a{display:block;font-size:13.5px;color:var(--muted);text-decoration:none;line-height:1.85;}
.fcol li a:hover{color:var(--accent-deep);}

/* Piilotettu ohitalinkki, näkyy vain näppäimistöllä */
.skip-link{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:0 0 10px 0;font-size:14px;text-decoration:none;}
.skip-link:focus{left:0;}
.screen-reader-text:focus{left:0;}

/* Admin-palkki ei saa työntää kiinteää navia piiloon */
body.admin-bar nav{top:32px;}
@media(max-width:782px){ body.admin-bar nav{top:46px;} }

/* Lohkoeditorin tuottama sisältö tekstisivuilla */
.legal .wp-block-heading{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(21px,2.1vw,28px);line-height:1.1;letter-spacing:-.02em;
  margin:clamp(30px,4vh,46px) 0 12px;}
.legal > *:first-child{margin-top:0;}
.legal ul,.legal ol{color:var(--muted);line-height:1.8;font-size:15.5px;
  margin:0 0 14px 1.2em;}
.legal li{margin-bottom:6px;}
.legal blockquote{border-left:2px solid var(--accent);padding-left:18px;margin:20px 0;}

/* Kaupan suodatinpallurat ovat linkkejä (toimivat ilman JS:ää) */
a.chip{text-decoration:none;display:inline-flex;align-items:center;}
.woocommerce .woocommerce-ordering select,select.orderby{
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;font-size:13.5px;padding:9px 14px;
  border-radius:999px;cursor:pointer;}
.woocommerce .woocommerce-ordering{margin:0;}
.woocommerce nav.woocommerce-pagination{margin-top:clamp(30px,5vh,52px);}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center;}
.woocommerce nav.woocommerce-pagination ul li{border:0;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;min-width:42px;
  font-size:14px;color:var(--ink);}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* Lohkoeditorin leveät lohkot. Ilman näitä alignfull vuotaa sivun yli
   ja tuo vaakavierityksen mukanaan. */
.legal .alignfull,.legal .alignwide{max-width:none;}
.legal .alignwide{width:calc(100% + clamp(20px,6vw,120px));
  margin-left:calc(-1 * clamp(10px,3vw,60px));}
.legal .alignfull{width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px);}
.legal .alignfull img,.legal .alignwide img{width:100%;height:auto;border-radius:12px;}
.legal .aligncenter{margin-left:auto;margin-right:auto;display:block;}
.legal .alignleft{float:left;margin:6px 22px 14px 0;max-width:50%;}
.legal .alignright{float:right;margin:6px 0 14px 22px;max-width:50%;}
.legal figure{margin:24px 0;}
.legal figure img{border-radius:12px;display:block;}
.legal figcaption{font-size:13px;color:var(--muted);margin-top:9px;text-align:center;}
.legal .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px;}
.legal .wp-block-table td,.legal .wp-block-table th{border-bottom:1px solid var(--line);
  padding:11px 10px;text-align:left;}
.legal .wp-block-buttons{display:flex;gap:11px;flex-wrap:wrap;margin:22px 0;}
.legal .wp-block-button__link{background:var(--accent);color:#2a1d12;border-radius:999px;
  padding:15px 30px;font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:15px;
  text-decoration:none;display:inline-block;}
.legal .wp-block-button__link:hover{background:var(--accent-deep);color:#fff;}

/* Hakulomake ja 404 */
.notfound{text-align:center;max-width:52ch;margin:0 auto;}
.notfound h1{font-size:clamp(48px,8vw,110px);margin-bottom:14px;}
.notfound p{color:var(--muted);line-height:1.7;font-size:16px;margin-bottom:26px;}
.searchform{display:flex;gap:10px;max-width:460px;margin:0 auto;}
.searchform input[type=search]{flex:1;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:15px;
  padding:14px 20px;border-radius:999px;}
.searchform input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(189,122,44,.18);}
.search-hit{padding:22px 0;border-bottom:1px solid var(--line);}
.search-hit h2{font-size:clamp(19px,1.8vw,24px);margin-bottom:6px;}
.search-hit h2 a{text-decoration:none;}
.search-hit h2 a:hover{color:var(--accent-deep);}
.search-hit p{color:var(--muted);font-size:14.5px;line-height:1.6;}

/* ---------- LOHKOEDITORIN SISÄLTÖALUE ----------
   page.php tulostaa sivun sisällön tähän. Alue on täysleveä, jotta kartta,
   kaksipalstaiset sivut ja täysleveät lohkot mahtuvat. Kapean tekstimitan
   saa lisäämällä ryhmälohkon jonka lisäluokka on "legal".
   Nämä säännöt ovat myös editorissa (add_editor_style), joten muokkausnäkymä
   näyttää saman kuin julkinen sivu. */
.sivun-sisalto > *:first-child{margin-top:0;}
.sivun-sisalto h2{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(28px,3.2vw,46px);line-height:1.08;margin:clamp(34px,4.5vh,58px) 0 16px;}
.sivun-sisalto h3{font-family:'Bricolage',sans-serif;font-weight:700;
  font-size:clamp(21px,2.2vw,29px);line-height:1.15;margin:clamp(24px,3vh,38px) 0 12px;}
.sivun-sisalto h4{font-family:'Bricolage',sans-serif;font-weight:700;font-size:18px;margin:24px 0 10px;}
.sivun-sisalto p{color:var(--muted);line-height:1.8;font-size:15.5px;margin:0 0 14px;}
/* Sähköpostiosoitteet ja URLit eivät katkea itsestään: ilman tätä ehtosivu
   vuotaa vaakasuunnassa puhelimessa (mitattu 596px / 390px). */
.sivun-sisalto{overflow-wrap:anywhere;}
.sivun-sisalto a{overflow-wrap:anywhere;}
.sivun-sisalto p b,.sivun-sisalto strong{color:var(--ink);font-weight:500;}
.sivun-sisalto a{color:var(--accent-deep);}
.sivun-sisalto ul,.sivun-sisalto ol{color:var(--muted);line-height:1.8;font-size:15.5px;
  margin:0 0 16px;padding-left:22px;}
.sivun-sisalto li{margin-bottom:7px;}
.sivun-sisalto hr{border:0;border-top:1px solid var(--line);margin:clamp(30px,4vh,50px) 0;}
.sivun-sisalto blockquote{border-left:2px solid var(--accent);padding-left:20px;margin:26px 0;}

/* Sarakelohko: sama välistys ja pinoaminen kuin teeman .two-col */
.sivun-sisalto .wp-block-columns{gap:clamp(34px,5vw,80px);align-items:flex-start;margin-bottom:0;}
/* Pinoaminen kapealla: flex-wrap yksin ei riitä, koska sarakkeilla on
   flex-basis:0;flex-grow:1. Ilman flex-basis:100% ne jäävät rinnakkain.
   Ei jätetä ytimen wp-block-library-tyylin varaan. */
@media(max-width:900px){
  .sivun-sisalto .wp-block-columns{flex-wrap:wrap!important;gap:38px;}
  .sivun-sisalto .wp-block-columns > .wp-block-column{flex-basis:100%!important;}
}
.sivun-sisalto .wp-block-column{min-width:0;}

/* Kuvalohko: sama pyöristys ja varjo kuin teeman omissa kuvissa */
.sivun-sisalto .wp-block-image img{border-radius:14px;display:block;width:100%;height:auto;}
.sivun-sisalto .wp-block-image figcaption{font-size:12.5px;color:var(--muted);margin-top:9px;}

/* Ryhmä- ja välilohkot eivät saa tuoda omia marginaaleja sekaisin */
.sivun-sisalto .wp-block-group{margin:0 0 clamp(20px,3vh,34px);}
.sivun-sisalto .wp-block-group:last-child{margin-bottom:0;}

/* Kapea tekstimitta: ryhmälohko lisäluokalla "legal".
   Nämä tulevat .sivun-sisalto-sääntöjen JÄLKEEN, jotta ne voittavat. */
.sivun-sisalto .legal{max-width:74ch;}
.sivun-sisalto .legal h2{font-size:clamp(21px,2.1vw,28px);margin:clamp(30px,4vh,46px) 0 12px;}
.sivun-sisalto .legal h2:first-child{margin-top:0;}

/* Painikelohko teeman napiksi */
.sivun-sisalto .wp-block-buttons,
.etusivun-sisalto .wp-block-buttons{display:flex;gap:13px;flex-wrap:wrap;margin:24px 0 0;}
.sivun-sisalto .wp-block-button__link,
.etusivun-sisalto .wp-block-button__link{background:var(--accent);color:#2a1d12;
  border-radius:999px;padding:15px 30px;font-family:'DM Sans',system-ui,sans-serif;
  font-weight:500;font-size:15px;text-decoration:none;transition:background .3s,color .3s;}
.sivun-sisalto .wp-block-button__link:hover,
.etusivun-sisalto .wp-block-button__link:hover{background:var(--accent-deep);color:#fff;}
.sivun-sisalto .wp-block-button.is-style-outline .wp-block-button__link,
.etusivun-sisalto .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--ink);border:1px solid var(--line);}
.sivun-sisalto .wp-block-button.is-style-outline .wp-block-button__link:hover,
.etusivun-sisalto .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* Taulukkolohko */
.sivun-sisalto .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px;}
.sivun-sisalto .wp-block-table td,.sivun-sisalto .wp-block-table th{
  border-bottom:1px solid var(--line);padding:11px 10px 11px 0;text-align:left;}
.sivun-sisalto .wp-block-table th{font-family:'Bricolage',sans-serif;font-weight:700;font-size:14px;}

/* Teeman omat rivikomponentit lohkoina: kappalelohkon alamarginaali tulisi
   .info-row/.hours-row -täytteen päälle ja tekisi riveistä liian korkeita. */
.sivun-sisalto .info-row,.sivun-sisalto .hours-row,
.sivun-sisalto .eyebrow,.sivun-sisalto .tlabel{margin-bottom:0;}
.sivun-sisalto .info-row,.sivun-sisalto .hours-row{color:inherit;}
.sivun-sisalto .lead{margin-bottom:0;}

/* Kuvalohko teeman kuvakehyksenä: kehys pitää kuvasuhteen, kuva täyttää sen. */
.sivun-sisalto .wp-block-image.kahvila-img{margin:0 0 30px;}
.sivun-sisalto .wp-block-image.kahvila-img img{height:100%;object-fit:cover;border-radius:0;}

/* CTA-lohko sisältöalueella: teeman tumma laatikko ilman ulkomarginaaleja */
.sivun-sisalto .cta{margin:clamp(40px,6vh,80px) 0 0;}
.sivun-sisalto .cta h2{color:var(--bg);margin:0 0 14px;}
.sivun-sisalto .cta p{color:rgba(244,241,234,.7);}
.sivun-sisalto .cta .wp-block-buttons{justify-content:center;}
.sivun-sisalto .cta .wp-block-button.is-style-outline .wp-block-button__link{
  color:var(--bg);border-color:rgba(244,241,234,.3);}
.sivun-sisalto .cta .wp-block-button.is-style-outline .wp-block-button__link:hover{
  color:var(--accent);border-color:var(--accent);background:transparent;}

/* Tarjouslaatikot (Yrityksille) */
.sivun-sisalto .offers{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,24px);margin-bottom:clamp(34px,5vh,60px);}
@media(max-width:820px){ .sivun-sisalto .offers{grid-template-columns:1fr;} }
.sivun-sisalto .offers .offer{margin:0;}
.sivun-sisalto .offer h3{margin:12px 0;}

/* ---------- KUVABOKSI ----------
   Täysleveä kuvakaista sisältöalueella. Teemassa on paikanpitäjä-SVG, jonka
   asiakas korvaa omalla kuvalla lohkoeditorissa (Korvaa-nappi). Kehys pitää
   kuvasuhteen, joten sivun asettelu ei hyppää kun kuva vaihtuu. */
.sivun-sisalto .wp-block-image.kuvaboksi{margin:clamp(30px,4vh,52px) 0;}
.sivun-sisalto .wp-block-image.kuvaboksi img{
  width:100%;aspect-ratio:16/7;height:auto;object-fit:cover;
  border-radius:16px;display:block;background:var(--surface);}
.sivun-sisalto .wp-block-image.kuvaboksi figcaption{
  font-size:13px;color:var(--muted);margin-top:10px;text-align:left;}
@media(max-width:640px){
  .sivun-sisalto .wp-block-image.kuvaboksi img{aspect-ratio:4/3;}
}

/* Yhteystietorivien ja aukiolojen raja: aiemmin viimeisen info-rivin alaviiva
   ja .hours-lohkon yläviiva osuivat päällekkäin ja väliin jäi tyhjän rivin
   näköinen rako. Nyt yksi viiva ja hallittu väli. */
.sivun-sisalto .info-list > *:last-child{border-bottom:0;}
.sivun-sisalto .hours{border-top:1px solid var(--line);
  margin-top:clamp(20px,3vh,30px);padding-top:clamp(16px,2.4vh,24px);}
.sivun-sisalto .hours > *:last-child{border-bottom:0;}

/* ---------- YRITYKSILLE: TIIVIS YLÄOSA ----------
   Yhteystietoboksin pitää näkyä ilman vieritystä, joten kaikki sen yläpuolinen
   on mitoitettu tiiviiksi: matalammat tarjouslaatikot ja matala kuvakaista. */
.sivun-sisalto .offers{margin-bottom:clamp(24px,3vh,36px);}
.sivun-sisalto .offers .offer{padding:clamp(20px,2.2vw,28px);}
.sivun-sisalto .offer h3{font-size:clamp(19px,1.9vw,25px);margin:9px 0 8px;}
.sivun-sisalto .offer p{font-size:15px;line-height:1.62;}

/* Matala kuvakaista: sama boksi, litteämpi kuvasuhde. */
.sivun-sisalto .wp-block-image.kuvaboksi.matala{margin:clamp(20px,2.6vh,32px) 0;}
.sivun-sisalto .wp-block-image.kuvaboksi.matala img{aspect-ratio:24/5;}
@media(max-width:640px){
  .sivun-sisalto .wp-block-image.kuvaboksi.matala img{aspect-ratio:16/9;}
}

/* ---------- YHTEYSTIETOBOKSI ----------
   Yhteystiedot omana korttinaan, jotta ne erottuvat ja asiakkaan voi ohjata
   niihin suoraan. Ei suurta otsikkoa päälle: rivit alkavat heti. */
.sivun-sisalto .yhteysboksi{background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:clamp(22px,2.6vw,32px);margin:0;}
.sivun-sisalto .yhteysboksi .boksi-otsikko{font-family:'Bricolage',sans-serif;
  font-weight:700;font-size:19px;color:var(--ink);margin:0 0 4px;line-height:1.2;}
.sivun-sisalto .yhteysboksi .boksi-apu{font-size:14px;color:var(--muted);margin:0 0 14px;}
.sivun-sisalto .yhteysboksi .info-row{border-bottom-color:rgba(42,29,18,.12);}
.sivun-sisalto .yhteysboksi .info-row:last-child{border-bottom:0;padding-bottom:0;}
.sivun-sisalto .yhteysboksi .wp-block-buttons{margin-top:18px;}

/* Kapealla näytöllä yhteystietoboksi nousee lomakkeen edelle: sama tavoite
   kuin työpöydällä, eli boksi näkyy ennen kuin pitää vierittää lomakkeen ohi.
   :has() rajaa tämän vain siihen palstaan jossa boksi on, joten Yhteystiedot-
   sivun järjestys ei muutu. Vanha selain jättää säännön huomiotta. */
@media(max-width:900px){
  .sivun-sisalto .wp-block-column:has(.yhteysboksi){order:-1;}
}

/* ---------- ETUSIVUN SISÄLTÖALUE ----------
   Hero on koodissa (animaatio ja viisto videoleikkaus eivät ole lohkoja).
   Kaikki sen alapuolella tulee lohkoeditorista.

   Osiot käyttävät teeman omia luokkia (.story, .kahvila, .teasers, .cta …),
   joten ulkoasu on täsmälleen sama kuin koodissa. Ylimmän tason ryhmälohko
   toimii <section>-elementin tilalla: siltä tulee osion täyte ja leveysraja.

   HUOM: .sivun-sisalto -typografiaa EI käytetä täällä. Sen otsikkokoot ovat
   pienemmät ja ne kumoaisivat etusivun omat, isommat otsikot. */
.etusivun-sisalto > .wp-block-group:not(.cta){
  position:relative;
  padding:clamp(70px,11vh,150px) var(--pad);
  max-width:calc(1320px + 2 * var(--pad));
  margin-left:auto;margin-right:auto;}
@media(max-width:640px){
  .etusivun-sisalto > .wp-block-group:not(.cta){padding:clamp(48px,7vh,72px) var(--pad);}
}
.etusivun-sisalto > .wp-block-group.cta{
  margin:0 var(--pad) clamp(40px,6vh,80px);}

/* Kuvalohko teeman kuvakehyksenä: kehys pitää kuvasuhteen, kuva täyttää sen. */
.etusivun-sisalto .wp-block-image{margin:0;}
.etusivun-sisalto .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover;}
.etusivun-sisalto .wp-block-image.story-img img,
.etusivun-sisalto .wp-block-image.kahvila-img img,
.etusivun-sisalto .wp-block-image.fb-img img{border-radius:inherit;}

/* Ryhmälohko ei saa tuoda omia marginaaleja teeman ruudukkoihin. */
.etusivun-sisalto .wp-block-group{margin:0;}
.etusivun-sisalto .teaser > *,.etusivun-sisalto .fb-copy > *{margin-top:0;}
.etusivun-sisalto p{margin:0 0 14px;}
.etusivun-sisalto .teaser p,.etusivun-sisalto .fb-copy p{margin-bottom:16px;}

/* Keskitetty nappirivi (esim. "Katso kaikki tuotteet"). */
.etusivun-sisalto .keskitetty{text-align:center;margin-top:clamp(28px,4vh,44px);}
.etusivun-sisalto .keskitetty .wp-block-buttons{justify-content:center;}

/* Tuoteruudukon lyhytkoodi tulee omana lohkonaan. */
.etusivun-sisalto .woocommerce{margin:0;}

/* ---------- RYHMÄLOHKON SISÄKÄÄRE ----------
   WordPress kääri ryhmälohkon sisällön ylimääräiseen diviin:

     <div class="wp-block-group feature-band">      <- ruudukko
       <div class="wp-block-group__inner-container">  <- ainoa lapsi
         <figure class="fb-img">…</figure>
         <div class="fb-copy">…</div>

   Silloin ruudukon ainoa lapsi on tuo kääre, ja sisältö pinoutuu sen sisään
   yhteen sarakkeeseen. Kaikki ryhmäpohjaiset ruudukot (.story, .feature-band,
   .kahvila, .teasers, .offers, .info-list, .cta) menivät tästä rikki.

   Kääre tulee WordPressin taaksepäinyhteensopivuudesta: se lisätään teemoille
   joilla ei ole theme.json-tiedostoa. display:contents poistaa käärekerroksen
   asettelusta, jolloin lapset ovat taas ruudukon suoria jäseniä.

   Vaihtoehto olisi lisätä theme.json, mutta se kytkisi teeman WordPressin
   globaaleihin tyyleihin ja muuttaisi paljon muutakin. Tämä on rajattu korjaus.
   Todennettu livesivun markupilla: .fb-copy siirtyi x=72 -> x=720. */
.etusivun-sisalto .wp-block-group__inner-container,
.sivun-sisalto .wp-block-group__inner-container{display:contents;}

/* ---------- [products] -LYHYTKOODIN KÄÄREDIVI ----------
   [products ... class="woo-grid"] asettaa luokan Woon KÄÄREDIVIIN, ei
   tuotelistaan. Silloin syntyy sisäkkäinen ruudukko: kääre on 4-sarakkeinen
   ruudukko jonka ainoa lapsi on <ul>, ja ul puristuu yhden sarakkeen levyiseksi.
   Tulos oli 59 pikselin levyiset tuotekortit.

   Ruudukko kuuluu ul.products-elementille (woo.css hoitaa sen), joten kääre
   palautetaan tavalliseksi lohkoksi. Sisältö on korjattu myös ilman luokkaa,
   mutta tämä suojaa jos luokka palaa. Todennettu: li 59px -> 307px. */
.etusivun-sisalto div.woocommerce.woo-grid,
.sivun-sisalto div.woocommerce.woo-grid{display:block;}

/* ---------- KULJETUSALUEET ----------
   Yrityksille-sivun laatikko jossa kerrotaan mihin maakuntiin kuljetus
   onnistuu. Sama korttiulkoasu kuin tarjouslaatikoissa, mutta täysleveänä
   omalla rivillään tarjouslaatikoiden alla. */
.sivun-sisalto .alueet{border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.4vw,30px);background:var(--surface);
  margin:0 0 clamp(20px,2.6vh,32px);}
.sivun-sisalto .alueet .tlabel{margin-bottom:0;}
.sivun-sisalto .alueet h3{font-family:'Bricolage',sans-serif;font-weight:700;
  font-size:clamp(19px,1.9vw,25px);margin:9px 0 10px;color:var(--ink);}
.sivun-sisalto .alueet p{font-size:15.5px;line-height:1.7;margin:0;max-width:74ch;}

/* ---------- SANAMUOTOISET AVAINLUVUT ----------
   .story .stat b on 46 px, mitoitettu lyhyille luvuille (1955, 3). Kun arvo
   on sana (Ruisvarras, Kaustinen), se ei mahdu palstaan ja rivi katkeaa.
   Lisäluokka "sanat" pienentää arvon luettavaan kokoon ja säilyttää
   saman visuaalisen elementin. */
.etusivun-sisalto .stats.sanat{gap:clamp(22px,2.4vw,34px);}
.etusivun-sisalto .stats.sanat .stat b{font-size:clamp(19px,1.9vw,26px);
  letter-spacing:-.01em;white-space:nowrap;}
.etusivun-sisalto .stats.sanat .stat span{font-size:12.5px;}