/* SanKo Design — blogin ulkoasu.
   Sama paletti ja kirjasimet kuin tuotteissa.

   TAVALLISIMMAT MUUTOKSET
   -----------------------
   Varit          :root-lohkosta. Yksi arvo muuttuu kerralla kaikkialla.
   Tekstin koko   body { font-size } — nyt 18px.
   Rivivali       body { line-height } — nyt 1.72. Isompi = ilmavampi.
   Palstan leveys main { max-width } — nyt 44rem, noin 800 px.
                  Sama luku on myos .ylapalkki- ja footer-lohkoissa;
                  muuta kaikki kolme, muuten ne eivat ole linjassa.
   Otsikon koko   h1 { font-size } ja h2 { font-size }.
   Korttien tyyli .kortti-lohko etusivun artikkelilistassa.

   Muutoksen jalkeen:  python3 blogi.py --esikatsele
*/


@font-face { font-family: Lora;  src: url(Lora.ttf)  format("truetype"); }
@font-face { font-family: Karla; src: url(Karla.ttf) format("truetype"); }

:root {
  --ink: #4A4139; --ink-soft: #6B5D51; --muted: #A2937F;
  --clay: #BE8262; --sage: #8D9C81; --sand: #F2E9DC; --rule: #E2D7C7;
  --paperi: #FBF7F1;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paperi); color: var(--ink);
  font-family: Karla, system-ui, sans-serif;
  font-size: 18px; line-height: 1.72;
  -webkit-text-size-adjust: 100%;
}

.ylapalkki {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  max-width: 44rem; margin: 0 auto; padding: 2rem 1.4rem 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.tunnus {
  font-family: Lora, Georgia, serif; font-size: 1.32rem;
  letter-spacing: .06em; color: var(--ink); text-decoration: none;
}
.alatunnus {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay);
}
.paavalikko {
  display: flex; gap: 1rem; margin-left: auto;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
}
.paavalikko a { color: var(--ink-soft); text-decoration: none; }
.paavalikko a:hover { color: var(--clay); }

main { max-width: 44rem; margin: 0 auto; padding: 0 1.4rem 3rem; }

h1 {
  font-family: Lora, Georgia, serif; font-weight: 500;
  font-size: 2.1rem; line-height: 1.24; margin: 2.2rem 0 1.1rem;
}
h2 {
  font-family: Lora, Georgia, serif; font-weight: 500;
  font-size: 1.32rem; line-height: 1.35; margin: 2.4rem 0 .7rem;
}
h3 {
  font-family: Karla, system-ui, sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); margin: 1.9rem 0 .5rem;
}
p { margin: 0 0 1.1rem; }
ul { margin: 0 0 1.3rem; padding-left: 1.15rem; }
li { margin-bottom: .42rem; }
li::marker { color: var(--sage); }
strong { font-weight: 700; }
a { color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--clay); text-underline-offset: .18em; }
a:hover { color: var(--clay); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem 0 1.6rem; }

article > p:first-of-type { font-size: 1.1rem; color: var(--ink-soft); }

/* --- Typografinen tunnus ------------------------------------------------
   Nimi varipalkilla ja harvennettu alaotsikko. Palkki on tekstin takana
   ja hieman sita kapeampi, jolloin kirjaimet ylittavat sen reunat. */

.tunnusbanneri { text-align: center; margin: 2.6rem 0 1.4rem; }
.tunnusbanneri h1 {
  margin: 0; font-size: 3.5rem; line-height: 1.04; font-weight: 500;
  letter-spacing: -.01em;
}
.tunnusbanneri .palkki {
  display: inline; padding: .1em .38em;
  background: var(--sand); box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tunnusbanneri .alaotsikko {
  margin: 1.5rem auto 0; max-width: 30rem;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.9;
}
.tunnusbanneri + .esittely {
  text-align: center; margin: 1.8rem 0 2.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.tunnusbanneri + .esittely p { margin: 0 auto; max-width: 34rem; }

/* --- Banneri ------------------------------------------------------------
   Kuviot tulevat build.py:n omasta kirjastosta, samasta jota kannet
   kayttavat. Kaari ja oksa asetetaan paallekkain. */

.banneri {
  display: grid; grid-template-columns: 12rem 1fr; gap: 2rem;
  align-items: center;
  margin: 1.6rem 0 2.4rem; padding: 2.2rem 2rem;
  background: var(--sand); border-radius: 4px;
}
.banneri-kuva { position: relative; height: 11rem; }
.banneri-kuva .kaari {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: 11rem; color: var(--clay); opacity: .55;
}
.banneri-kuva .oksa {
  position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
  height: 8.4rem; color: var(--sage);
}
/* Kun bannerissa on oma valokuva, se on koko leveydelta ja otsikko
   tulee sen alle. Nain teksti on aina luettava, naytosta riippumatta. */
.banneri.banneri-kuvalla {
  display: block; padding: 0; background: none;
}
.banneri-kansi { border-radius: 4px; overflow: hidden; }
.banneri-kansi img { display: block; width: 100%; height: auto; }
.banneri-kuvalla .banneri-teksti { padding: 1.5rem .2rem .4rem; }
.banneri-kuvalla h1 { font-size: 2.1rem; }
.banneri-kuvalla p { max-width: 36rem; }

.banneri h1 { margin: 0 0 .7rem; font-size: 1.95rem; }
.banneri p { margin: 0; color: var(--ink-soft); max-width: 30rem; }

/* --- Kuvat ja kuviot ---------------------------------------------------- */

.art { display: block; }

.kortti-kuva, .artikkeli-kuva { overflow: hidden; border-radius: 3px; }
.kortti-kuva.on-kuva img, .artikkeli-kuva.on-kuva img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.kuvio {
  display: flex; align-items: center; justify-content: center;
  background: var(--sand);
}
.kuvio .art { height: 62%; color: var(--sage); }

/* Valokuva nakyy omassa mittasuhteessaan, jotta Canvassa tehty rajaus
   sailyy sellaisenaan. Vain kasvikuvio saa kiintean korkeuden. */
.artikkeli-kuva { margin: 1.8rem 0 .4rem; }
.artikkeli-kuva.on-kuva { height: auto; }
.artikkeli-kuva.on-kuva img { height: auto; }
.artikkeli-kuva.kuvio { height: 15rem; }
.artikkeli-kuva.kuvio .art { height: 8rem; }

.esittely { padding-top: .6rem; }
.esittely p { color: var(--ink-soft); max-width: 34rem; }

.lista { display: grid; gap: 1rem; margin: 2.2rem 0 1rem; }
.kortti {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.3rem;
  align-items: center; padding: 1.1rem 1.3rem; background: #fff;
  border: 1px solid var(--rule); border-radius: 3px; text-decoration: none;
}
.kortti:hover { border-color: var(--clay); }
/* Kiintea korkeus. Ilman sita pystysuora kuvio venyttaa koko kortin,
   koska SVG:n korkeus lasketaan sailion korkeudesta ja painvastoin. */
.kortti .kortti-kuva { height: 7.5rem; }
.kortti-teksti { align-self: center; }
.kortti h2 { margin: 0 0 .4rem; font-size: 1.16rem; }
.kortti p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

.lomake {
  margin: 3rem 0 0; padding: 1.6rem 1.5rem;
  background: var(--sand); border-radius: 3px;
}
.lomake h2 { margin-top: 0; font-size: 1.16rem; }
.lomake p { margin-bottom: .5rem; font-size: .95rem; color: var(--ink-soft); }
.muistutus {
  font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--rule);
  padding-top: .7rem; margin-top: .9rem;
}

footer {
  max-width: 44rem; margin: 0 auto; padding: 1.6rem 1.4rem 3rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--muted);
}
footer p { margin: .25rem 0; }

/* --- Kauppa ------------------------------------------------------------
   Tuotesivut ovat osa samaa staattista sivustoa. Ostopainike vie Etsyyn
   tai Amazoniin, joten sivu ei tarvitse evästeitä tai omaa ostoskoria. */
.kauppa-alku { text-align: center; margin: 2.8rem 0 3.5rem; }
.kauppa-alku .ylateksti, .osio-otsikko > p {
  margin: 0 0 .55rem; color: var(--clay); font-size: .76rem;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.kauppa-alku h1 { max-width: 38rem; margin: 0 auto 1.1rem; }
.kauppa-alku > p:not(.ylateksti) { max-width: 37rem; margin: 0 auto; color: var(--ink-soft); }
.kielilinkit { display: flex; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.kielilinkit a {
  padding: .55rem 1rem; border: 1px solid var(--rule); border-radius: 2rem;
  background: #fff; text-decoration: none; font-size: .88rem;
}
.kauppa-osio { margin: 0 0 4rem; scroll-margin-top: 1rem; }
.osio-otsikko { margin: 0 0 1.2rem; border-bottom: 1px solid var(--rule); }
.osio-otsikko h2 { margin: 0 0 1rem; font-size: 1.65rem; }
.tuoteruudukko { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; }
.tuotekortti {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
}
.kauppa-kuva {
  display: flex; align-items: center; justify-content: center;
  height: 17rem; padding: 1rem; overflow: hidden; background: var(--sand);
}
.tuote-riittavan-hyva-fi .kauppa-kuva,
.tuote-good-enough-en .kauppa-kuva { background: #d8cabb; }
.kauppa-kuva img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tuotekortti-teksti { display: flex; flex: 1; flex-direction: column; padding: 1.15rem 1.2rem 1.25rem; }
.tuotekortti h2 { margin: .1rem 0 .25rem; font-size: 1.24rem; }
.tuotekortti p { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.tuotekortti .tuoteryhma {
  margin: 0; color: var(--clay); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.tuotekortti .tuotemuoto { margin: 0 0 .75rem; color: var(--muted); font-size: .78rem; }
.kauppa-nappi {
  display: block; margin-top: auto; padding: .72rem 1rem; border-radius: 2rem;
  background: var(--ink); color: var(--paperi); text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; text-transform: uppercase;
}
.kauppa-nappi:hover { color: #fff; background: var(--clay); }
.kauppa-nappi.ei-linkkia { background: var(--rule); color: var(--ink-soft); }

@media (max-width: 40rem) {
  .banneri { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.8rem 1.4rem; }
  .banneri-kuva { height: 8.5rem; }
  .banneri-kuva .kaari { height: 8.5rem; }
  .banneri-kuva .oksa { height: 6.4rem; }
  .kortti { grid-template-columns: 1fr; gap: .9rem; }
  .kortti .kortti-kuva { height: 8.5rem; }
  .artikkeli-kuva.kuvio { height: 11rem; }
  .tuoteruudukko { grid-template-columns: 1fr; }
  .kauppa-kuva { height: 18rem; }
}

@media (max-width: 40rem) {
  .tunnusbanneri h1 { font-size: 2.4rem; }
  .tunnusbanneri .alaotsikko { font-size: .72rem; letter-spacing: .16em; }
}

@media (max-width: 34rem) {
  body { font-size: 17px; }
  .tunnusbanneri h1 { font-size: 2rem; }
  h1 { font-size: 1.72rem; }
  .banneri h1 { font-size: 1.62rem; }
  .ylapalkki { align-items: center; }
  .paavalikko { gap: .7rem; font-size: .74rem; }
}

/* Taulukko: sama ilme kuin tuotteiden taulukoissa. Kapealla naytolla
   se vierii vaakasuunnassa omassa sailiossaan, jottei sivu itse leviä. */
.taulukko { margin: 1.8rem 0; overflow-x: auto; }
.taulukko table {
  width: 100%; border-collapse: collapse; font-size: .93rem;
  white-space: nowrap;
}
.taulukko th {
  text-align: left; padding: 0 .9rem .55rem 0;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--clay); font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.taulukko td {
  padding: .62rem .9rem .62rem 0; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-soft, #EFE7DA);
}
.taulukko tr:last-child td { border-bottom: 0; }
.taulukko td:first-child { color: var(--ink); font-weight: 500; }

/* Allekirjoitus ja tuotenosto artikkelin lopussa. */
.nimikirjoitus {
  margin: 2.6rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem; font-style: italic; color: var(--muted);
}
.tuote {
  margin: 1.6rem 0 0; padding: 1.6rem 1.7rem 1.5rem;
  background: var(--sand); border-radius: 4px;
}
.tuote p { margin: 0 0 .9rem; font-size: .97rem; color: var(--ink); }
.tuote p:last-of-type { margin-bottom: 1.2rem; }
.tuote-nappi {
  display: inline-block; padding: .72rem 1.5rem;
  background: var(--ink); color: var(--sand);
  border-radius: 3px; text-decoration: none;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700;
}
.tuote-nappi:hover { background: var(--clay); color: var(--sand); }
.tuote-nappi:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Nosto: sama elementti kuin tuotteiden callout-laatikko. Keventaa
   pitkaa tekstia ja nostaa esiin sen yhden lauseen, joka kannattaa
   muistaa. Kirjoitetaan markdownissa rivilla joka alkaa merkilla >. */
.nosto {
  margin: 2rem 0; padding: 1.3rem 1.5rem;
  background: var(--sand); border-left: 2.5pt solid var(--clay);
  border-radius: 0 3px 3px 0;
}
.nosto p {
  margin: 0; font-family: Lora, Georgia, serif; font-size: 1.08rem;
  line-height: 1.6; color: var(--ink);
}