/* ==========================================================
   Tunnekartta – sivuston tyylit
   Värit ja fontit on koottu alle muuttujiksi (:root).
   ========================================================== */
:root {
  --muste: #17142B;          /* pääteksti ja tummat pinnat */
  --harmaa: #4A4560;         /* toissijainen teksti */
  --pohja: #FFFFFF;          /* sivun tausta */
  --vaalea: #F4F2FA;         /* vaaleat kortit */
  --viiva: #DAD6E8;
  --linkki: #3B2BB5;
  --keltainen: #FFC21A;
  --keltainen-v: #FFE49B;
  --punainen: #F0445A;
  --sininen: #4D7FE8;
  --vihrea: #34B97A;
  --laventeli: #DCD3FF;
  --fontti: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --leveys: 1280px;
  --reuna: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pohja); color: var(--muste); font-family: var(--fontti); font-size: 17px; line-height: 1.5; }
a { color: var(--linkki); }
a:hover { color: #1F1470; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--linkki); outline-offset: 3px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--muste); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--leveys); margin: 0 auto; padding-left: var(--reuna); padding-right: var(--reuna); }
.section { padding-top: 64px; padding-bottom: 64px; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: var(--harmaa); }
.display { font-size: clamp(44px, 6.4vw, 92px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }
.h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -0.03em; }
.lead { font-size: 20px; color: var(--harmaa); max-width: 560px; }

/* ---------- Ylä- ja alaosa ---------- */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--muste); text-decoration: none; font-weight: 800; font-size: 24px; }
.logo { display: grid; grid-template-columns: repeat(2, 13px); gap: 3px; }
.logo span { width: 13px; height: 13px; border-radius: 4px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 17px; font-weight: 600; }
.site-nav a { color: var(--muste); text-decoration: none; padding: 10px 0; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.site-footer { border-top: 1px solid var(--viiva); margin-top: 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 32px; padding-bottom: 48px; color: var(--harmaa); font-size: 15px; }
.site-footer a { color: var(--harmaa); }
.site-footer .install { display: none; }
.site-footer .install.show { display: inline-flex; }

/* ---------- Painikkeet ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--muste); color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; border: 0; cursor: pointer; }
.btn:hover { color: #fff; background: #2C2650; }
.btn-outline { background: transparent; color: var(--muste); border: 3px solid var(--muste); }
.btn-outline:hover { background: var(--muste); color: #fff; }
.btn-white { background: #fff; color: var(--muste); }
.btn-white:hover { background: var(--vaalea); color: var(--muste); }

/* ---------- Etusivu: hero ja kartta ---------- */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; padding-top: 32px; padding-bottom: 40px; }
.hero > h1 { flex: 1 1 560px; }
.hero-side { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.map-section { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-bottom: 80px; }
.map-area { flex: 999 1 560px; min-width: 0; display: flex; gap: 12px; }
.axis-y { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-bottom: 40px; font-size: 14px; font-weight: 600; color: var(--harmaa); writing-mode: vertical-rl; transform: rotate(180deg); }
.axis-y strong, .axis-x strong { letter-spacing: 0.14em; color: var(--muste); }
.map-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { aspect-ratio: 1 / 0.82; min-height: 64px; border: 0; border-radius: 18px; padding: 14px; display: flex; align-items: flex-end; color: var(--muste); text-align: left; cursor: pointer; font-size: clamp(14px, 1.6vw, 22px); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; transition: transform .15s; }
.tile:hover { transform: translateY(-2px); }
.tile[aria-pressed="true"] { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--muste); }
.axis-x { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--harmaa); }
.feeling-card { flex: 1 1 380px; min-width: 0; border-radius: 28px; overflow: hidden; background: var(--vaalea); }
.feeling-card .top { padding: 28px 32px 26px; }
.feeling-card .top h2 { font-size: 60px; font-weight: 800; letter-spacing: -0.03em; margin-top: 8px; }
.feeling-card .body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 22px; }
.q-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.q-list li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 14px 16px; line-height: 1.4; }
.q-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--muste); }
.tip { background: var(--muste); color: #fff; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.tip .eyebrow { color: var(--keltainen-v); }
.tip a { color: #fff; font-size: 14px; font-weight: 700; }

/* ---------- Värikortit ---------- */
.band { background: var(--laventeli); border-radius: 36px; padding: clamp(28px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.band > div { flex: 1 1 480px; display: flex; flex-direction: column; gap: 12px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ccard { border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 8px; color: var(--muste); text-decoration: none; }
a.ccard:hover { color: var(--muste); transform: translateY(-2px); }
.ccard h3 { font-size: 26px; font-weight: 800; }
.ccard .src { margin-top: auto; font-size: 14px; font-weight: 700; padding-top: 8px; }
.dark { background: var(--muste); color: #fff; }
.dark a { color: #fff; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; margin-bottom: 32px; }

/* ---------- Tunteet A–Ö ---------- */
.search { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 6px; }
.search input { min-height: 52px; padding: 0 18px; border: 3px solid var(--muste); border-radius: 16px; font: inherit; font-size: 18px; color: var(--muste); background: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 3px solid var(--muste); background: #fff; color: var(--muste); font-weight: 700; font-size: 16px; cursor: pointer; }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; }
.chip[aria-pressed="true"] { background: var(--muste); color: #fff; }
.wcard { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 6px; min-height: 196px; color: var(--muste); text-decoration: none; }
.wcard:hover { color: var(--muste); transform: translateY(-2px); }
.wcard .name { font-size: 28px; line-height: 1.05; font-weight: 800; overflow-wrap: anywhere; }
.wcard .def { font-size: 15px; }
.wcard .ask { margin-top: auto; padding-top: 10px; border-top: 2px solid var(--muste); font-size: 15px; }

/* ---------- Tunteen oma sivu ---------- */
.crumbs { font-size: 16px; color: var(--harmaa); }
.crumbs a { color: var(--harmaa); }
.f-hero { border-radius: 36px; padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; gap: 18px; }
.f-hero h1 { font-size: clamp(56px, 8.4vw, 132px); line-height: 0.92; font-weight: 800; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.f-hero .def { max-width: 720px; font-size: 22px; line-height: 1.45; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 700; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.info-grid article { background: var(--vaalea); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.info-grid h2 { font-size: 24px; font-weight: 800; }
.ask-section .wrap { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.ask-section .intro { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.ask-section ol { flex: 2 1 560px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ask-section li { display: flex; gap: 18px; align-items: center; background: #252046; border-radius: 22px; padding: 18px 22px; font-size: 20px; line-height: 1.4; }
.ask-section .q-num { width: 44px; height: 44px; font-size: 17px; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.compare div { border: 3px solid var(--muste); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.compare h3 { font-size: 26px; font-weight: 800; }
.didyou { background: var(--keltainen); border-radius: 32px; padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.didyou .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.didyou .grid div { background: #fff; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.didyou h3 { font-size: 22px; font-weight: 800; }
.didyou a { color: var(--muste); font-weight: 700; }
.cta-row { background: var(--laventeli); border-radius: 26px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 19px; font-weight: 700; }
.prevnext { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 700; }
.prevnext a { color: var(--muste); padding: 10px 0; }

/* ---------- Kehokartta ---------- */
.body-section { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-bottom: 72px; }
.body-section > div { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.body-figure { flex: 1 1 420px; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.silhouette { position: relative; width: min(400px, 100%); aspect-ratio: 1 / 2; border-radius: 40px; background: var(--muste); overflow: hidden; }
.silhouette svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.blob { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(6px); mix-blend-mode: screen; transition: all .4s; }
.legend { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--harmaa); }
.legend span.sw { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }

/* ---------- Tunnepolku ---------- */
.polku-body { background: var(--vaalea); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.steps li { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: var(--harmaa); }
.steps li::before { content: ""; height: 8px; border-radius: 999px; background: var(--viiva); }
.steps li.done { color: var(--muste); }
.steps li.done::before { background: var(--muste); }
.panel { background: #fff; border-radius: 36px; padding: clamp(24px, 4vw, 56px); min-height: 480px; display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.choice { min-height: 72px; border: 3px solid var(--viiva); border-radius: 20px; background: var(--vaalea); color: var(--muste); font-weight: 700; font-size: 20px; cursor: pointer; }
.fam-btn { min-height: 140px; border: 0; border-radius: 22px; color: var(--muste); font-weight: 800; font-size: 26px; cursor: pointer; display: flex; align-items: flex-end; padding: 18px; }
.word-btn { min-height: 64px; padding: 0 28px; border: 3px solid var(--muste); border-radius: 999px; color: var(--muste); font-weight: 700; font-size: 22px; cursor: pointer; }
.panel textarea { border: 3px solid var(--viiva); border-radius: 18px; padding: 14px; font: inherit; resize: vertical; width: 100%; }
.panel-nav { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.linkbtn { background: none; border: 0; color: var(--linkki); font-weight: 700; font-size: 17px; text-decoration: underline; cursor: pointer; min-height: 48px; }

/* ---------- Tutkittua tietoa ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.flow > div { flex: 1 1 200px; background: #fff; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.flow > div.last { background: var(--muste); color: #fff; }
.sources { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #2E2A45; }

/* ---------- Pienet näytöt ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .feeling-card .top h2 { font-size: 44px; }
  .ask-section li { font-size: 18px; }
  .steps { gap: 4px; }
  .steps li { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}