/* 2ndBrain — alasivujen yhteinen tyyli (Mitä · Miksi · Miten).
   Paletti on Ouran vaalea sävymaailma, arvot suoraan heidän tokeneistaan.
   Etusivu index.html pitää tyylinsä omassa <style>-lohkossaan; tämä tiedosto
   on alasivuja varten, jotta ne eivät ala erota toisistaan.

   Mitatut kontrastit kermalla #f7f1e8:
     gray-550   #19191c  15,62:1   otsikot ja pääteksti
     sandstone-500 #4a4741  8,24:1  leipäteksti
     mustard-700 #684d07   7,05:1  korostus ja linkit
     sandstone-100 #fefaef mustard-700-pinnalla 7,59:1
   Sivuston sääntö on 7:1 kaikelle tekstille. Älä käytä Ouran gray-350 (2,45:1)
   tai gray-400 (3,84:1) tekstinä. */

@font-face {
  font-family: "Otsikko";
  src: url("fontit/instrument-serif-latin-normal.woff2?v=9b8dd1ec") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Leipa";
  src: url("fontit/inter-latin-normal.woff2?v=260c81a4") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}

:root {
  --tausta: #f7f1e8;            /* sandstone-200, Ouran sivupohja */
  --pinta: #ffffff;             /* valkoinen kortti kermalla */
  --pinta-upotettu: #efe6db;    /* sandstone-400 */
  --teksti: #19191c;            /* gray-550 */
  --himmea: #4a4741;            /* sandstone-500 — tumma, ei himmeä */
  --korostus: #684d07;          /* mustard-700, ainoa 7:1 yltävä hunaja */
  --korostus-pinnalla: #fefaef; /* sandstone-100, teksti hunajapinnalla */
  --korostus-viiva: #af751b;    /* mustard-500, vain viivat ja kehykset */
  --korostus-vaisu: #ffefd8;    /* mustard-50, lämmin täyttö */
  --reuna: rgba(74, 71, 65, 0.65);      /* 3,36:1 — painikkeet ja kentät */
  --hiusviiva: rgba(74, 71, 65, 0.18);  /* koriste-erottimet */
  --leveys: 1120px;
  --kouru: 24px;
  --kaari: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) { :root { --kouru: 64px; } }

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font-family: "Leipa", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* --- ylapalkki --- */
.ohita {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--korostus); color: var(--korostus-pinnalla); font-weight: 600;
  padding: 12px 20px; border-radius: 0 0 12px 0; text-decoration: none;
}
.ohita:focus { left: 0; }

.ylapalkki {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px; padding: 10px var(--kouru);
  background: rgba(247, 241, 232, 0.95);
  border-bottom: 1px solid var(--hiusviiva);
  backdrop-filter: blur(12px);
}
.ylapalkki .merkki {
  font-family: "Otsikko", serif; font-size: 1.35rem;
  letter-spacing: -0.025em; color: var(--teksti); text-decoration: none;
}
.ylapalkki nav { display: flex; align-items: center; gap: 6px; }
.ylapalkki nav a {
  font-size: 0.92rem; font-weight: 500; color: var(--himmea);
  text-decoration: none; padding: 9px 14px; border-radius: 999px;
  transition: color .3s var(--kaari), background .3s var(--kaari);
}
.ylapalkki nav a:hover { color: var(--korostus); background: var(--korostus-vaisu); }
/* Sivu, jolla ollaan: merkitään aria-current="page", ei pelkällä värillä. */
.ylapalkki nav a[aria-current="page"] { color: var(--korostus); font-weight: 600; }
.ylapalkki nav a.painike,
.ylapalkki nav a.painike:hover { color: var(--korostus-pinnalla); background: var(--korostus); }
.ylapalkki .painike { margin-top: 0; padding: 11px 22px; font-size: 0.9rem; }
@media (max-width: 860px) { .ylapalkki nav a.piiloon-kapealla { display: none; } }

/* --- rakenne --- */
.rajaus { max-width: var(--leveys); margin: 0 auto; padding: 0 var(--kouru); width: 100%; }
section { padding: clamp(64px, 9vh, 120px) 0; }
section:first-of-type { padding-top: clamp(56px, 8vh, 96px); }
.umpinainen { background: var(--pinta); }

/* --- typografia --- */
.silmays {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--korostus); margin: 0 0 18px;
}
.nayttava {
  font-family: "Otsikko", Georgia, "Times New Roman", serif;
  font-weight: 400; line-height: 1.04; letter-spacing: -0.035em; margin: 0;
}
h1.nayttava {
  font-size: clamp(2.6rem, 7.4vw, 5rem);
  line-height: 1.1; letter-spacing: -0.05em; text-wrap: balance;
}
h2.nayttava {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  max-width: 20ch; text-wrap: balance; margin-bottom: 22px;
}
h3 {
  font-family: "Leipa", sans-serif; font-size: 1.12rem; font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 10px; color: var(--teksti);
}
.ingressi {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  line-height: 1.3; letter-spacing: -0.02em;
  color: var(--korostus); margin: 24px 0 0; max-width: 28ch;
}
p { color: var(--himmea); }
.leipa { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; margin: 0 0 18px; }
.leipa:last-child { margin-bottom: 0; }
.leipa strong { color: var(--teksti); font-weight: 600; }
/* Ilman tätä selain piirtäisi leipätekstin linkit oletussinisellä. */
.leipa a, .alaviite a, .tarkista a, .hukat a, .vaihe a { color: var(--korostus); }
.alaviite { font-size: 0.86rem; color: var(--himmea); margin-top: 18px; max-width: 62ch; }

/* --- iso väliväite --- */
.vaite { text-align: center; border-top: 1px solid var(--hiusviiva); border-bottom: 1px solid var(--hiusviiva); }
.vaite .nayttava { max-width: 22ch; margin: 0 auto; }
.vaite em { font-style: normal; color: var(--korostus); }
.vaite .leipa { margin: 22px auto 0; text-align: center; }

/* --- viivalista --- */
.hukat { list-style: none; margin: 26px 0 0; padding: 0; max-width: 62ch; }
.hukat li {
  padding: 14px 0 14px 26px; position: relative;
  border-top: 1px solid var(--hiusviiva); color: var(--himmea);
}
.hukat li:last-child { border-bottom: 1px solid var(--hiusviiva); }
.hukat li::before {
  content: ""; position: absolute; left: 0; top: 1.5em;
  width: 12px; height: 1px; background: var(--korostus-viiva);
}
.hukat li strong { color: var(--teksti); font-weight: 600; }

/* --- numeroitu ohje tai vaiheet --- */
.tarkista, .vaiheet {
  counter-reset: askel; list-style: none; margin: 26px 0 0; padding: 0;
  max-width: 62ch; display: grid; gap: 18px;
}
.tarkista li, .vaihe { position: relative; padding-left: 52px; color: var(--himmea); }
.tarkista li::before, .vaihe::before {
  counter-increment: askel; content: counter(askel, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: "Otsikko", serif; font-size: 1.5rem; line-height: 1;
  color: var(--korostus);
}
.tarkista li strong, .vaihe strong, .vaihe h3 {
  color: var(--teksti); font-weight: 600; display: block; margin-bottom: 4px;
}

/* --- korttiruudukko (valkoinen kortti kermalla, rakenne reunasta) --- */
.kortit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 34px; }
.kortti-teksti {
  background: var(--pinta); border: 1px solid var(--hiusviiva);
  border-radius: 18px; padding: 26px 24px;
}
.kortti-teksti p { margin: 0; font-size: 0.98rem; }

/* --- painike --- */
.painike {
  display: inline-block; margin-top: 36px; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.02em; color: var(--korostus-pinnalla); background: var(--korostus);
  border: none; border-radius: 999px; padding: 15px 34px; text-decoration: none;
  transition: transform .2s, filter .2s;
}
.painike:hover { filter: brightness(1.12); transform: translateY(-1px); }
.painike.reunus { color: var(--teksti); background: transparent; border: 1px solid var(--reuna); }
.painike.reunus:hover { border-color: var(--korostus); color: var(--korostus); filter: none; }
:focus-visible { outline: 2px solid var(--korostus); outline-offset: 2px; }

/* --- hero, jossa on kuva oikealla ---
   Teksti ja kuva ovat samassa optisessa painossa: teksti hiukan leveämpi, kuva
   pystysuunnassa keskitetty otsikkoon nähden. Kapealla näytöllä kuva menee
   tekstin alle, ei tekstin viereen puristettuna. */
.hero-kaksi {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-kaksi { grid-template-columns: 1fr; gap: 32px; }
}
.hero-kuva { margin: 0; }
.hero-kuva img {
  display: block; width: 100%; height: auto;
  border-radius: 20px;
}

/* --- kuvat --- */
.kuvalohko { margin: 34px 0 0; }
.kuvalohko img { display: block; width: 100%; height: auto; border-radius: 18px; }
.kuvalohko figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--himmea); }

footer {
  border-top: 1px solid var(--hiusviiva);
  padding: 40px 20px calc(48px + env(safe-area-inset-bottom));
  text-align: center; font-size: 0.88rem; color: var(--himmea); background: var(--tausta);
}
footer a { color: var(--korostus); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .painike { transition: none; }
}