/* =================================================================
   Ismo – tyylit
   Lämmin, aurinkoinen editorial-ilme. Otsikot sinisellä, tehosteet
   keltaisesta oranssiin, monikorttinen "voikukka"-pino ja aaltoreunat.
   ================================================================= */

:root{
  /* Paletti suoraan liitteestä */
  --navy:#283778;  --navy-syva:#1b2552;  --blue:#326eb4;  --blue-vaalea:#e8f0fb;
  --harmaa:#a5aaaa;
  --y1:#fff573; --y2:#ffe600; --y3:#ffc300; --o1:#f59b00; --o2:#f0640a;

  --paperi:#fffdf5;          /* lämmin "auringonpaiste"-tausta */
  --paperi-tumma:#fbf4e2;
  --muste:#23262e;
  --muste-haalea:#6b6550;

  --kuori:1180px;
  --kuori-kapea:720px;
  --pyoreys:26px;
  --varjo:0 18px 40px -22px rgba(40,55,120,.42);
  --varjo-pehmea:0 8px 24px -16px rgba(40,55,120,.5);

  --display:'Fraunces',Georgia,serif;
  --leipa:'Hanken Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--leipa); color:var(--muste);
  background:var(--paperi);
  background-image:
    radial-gradient(120% 60% at 78% -8%, rgba(255,227,0,.18), transparent 60%),
    radial-gradient(80% 40% at 10% -4%, rgba(245,155,0,.10), transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--o2)}

.kuori{max-width:var(--kuori);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.kuori-kapea{max-width:var(--kuori-kapea);margin-inline:auto;padding-inline:clamp(18px,4vw,28px)}

.ohita{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.ohita:focus{left:0}
:focus-visible{outline:3px solid var(--o1);outline-offset:2px;border-radius:6px}

/* ---------- Yläpalkki (vaalean sininen) -------------------------- */
.ylapalkki{position:sticky;top:0;z-index:100;background:rgba(232,240,251,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(50,110,180,.16)}
.ylapalkki.kiinni{box-shadow:0 6px 18px -12px rgba(40,55,120,.5)}
.ylapalkki__sisus{display:flex;align-items:center;justify-content:space-between;height:66px}
.brandi{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandi__logo{border-radius:50%;box-shadow:0 3px 10px -4px rgba(40,55,120,.6)}
.brandi__nimi{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--navy);letter-spacing:-.01em}
.aihe-nappi{font-family:var(--leipa);font-weight:700;color:var(--navy);background:#fff;
  border:2px solid rgba(50,110,180,.3);border-radius:999px;padding:9px 18px;cursor:pointer;font-size:.95rem}
.aihe-nappi[aria-expanded="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.aiherivi{background:rgba(232,240,251,.95);border-bottom:1px solid rgba(50,110,180,.16)}
.aiherivi__sisus{display:flex;flex-wrap:wrap;gap:10px;padding-block:14px}

/* ---------- Pillerit (aihevalitsimet) ---------------------------- */
.pilleri{--pv:var(--o1);display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-weight:700;font-size:.92rem;color:var(--navy);background:#fff;
  border:2px solid var(--pv);border-radius:999px;padding:8px 15px;
  transition:transform .18s ease, background .18s ease, color .18s ease}
.pilleri:hover{background:var(--pv);color:#fff;transform:translateY(-2px)}
.pilleri--koti{border-color:var(--navy)}
.pilleri--koti:hover{background:var(--navy)}
.pilleri__lkm{font-size:.74rem;background:var(--pv);color:#fff;border-radius:999px;
  min-width:20px;height:20px;display:inline-grid;place-items:center;padding-inline:5px}
.pilleri:hover .pilleri__lkm{background:rgba(255,255,255,.28)}

/* ---------- Hero (etusivu) – "wow": pyörivä voikukka ------------- */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg, #fff6d6 0%, #fff9e8 40%, var(--paperi) 100%)}
.hero__loiste{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hero__voikukka{width:min(680px,120vw);max-width:none;opacity:.9;
  filter:saturate(1.05);
  animation:pyori 90s linear infinite;transform-origin:center}
@keyframes pyori{to{transform:rotate(360deg)}}
.hero__sisus{position:relative;z-index:2;padding-block:clamp(56px,9vw,104px) clamp(40px,6vw,72px);text-align:center}
.hero__ylariv{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;
  color:var(--o2);margin:0 0 14px}
.hero__otsikko{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:clamp(3.2rem,11vw,6.5rem);line-height:.92;letter-spacing:-.025em;margin:0;
  text-shadow:0 2px 0 rgba(255,255,255,.6)}
.hero__lause{font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.6rem);color:var(--navy);max-width:30ch;margin:18px auto 0;opacity:.92}
.rajaus{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:30px}
.rajaus__teksti{font-weight:700;color:var(--navy);margin-right:4px}

/* Aaltoerotin */
.aalto-erotin{display:block;width:100%;height:clamp(50px,7vw,110px);margin-top:-1px}
.aalto-erotin path{fill:var(--paperi)}
.aalto-erotin--vari path{fill:var(--paperi)}

/* ---------- Osiot ------------------------------------------------ */
.osio{padding-block:clamp(36px,6vw,72px)}
.osio__otsake{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.osio__otsikko{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:clamp(1.8rem,4vw,2.6rem);margin:0;letter-spacing:-.02em}
.osio__viiva{flex:1;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--y2),var(--o1),var(--o2));opacity:.8}

/* ---------- Monikorttinen "voikukka"-pino ----------------------- */
.ruudukko{display:grid;gap:clamp(26px,3vw,38px);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.nosto{margin-bottom:clamp(30px,4vw,46px)}

.kortti-pino{position:relative;isolation:isolate}
.kortti__taka{position:absolute;inset:0;z-index:1;background:var(--v);
  border-radius:var(--m);transform:rotate(var(--k)) translateY(8px) scale(.985);
  transition:transform .4s cubic-bezier(.2,.8,.25,1);opacity:.9}
.kortti__taka:first-of-type{opacity:.7}
.kortti{position:relative;z-index:3;display:block;text-decoration:none;color:inherit;
  background:#fff;border-radius:var(--pyoreys);overflow:hidden;box-shadow:var(--varjo);
  border:1px solid rgba(40,55,120,.06);
  transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease}
.kortti-pino:hover .kortti{transform:translateY(-6px)}
.kortti-pino:hover .kortti__taka{transform:rotate(calc(var(--k) * 2)) translateY(14px) translateX(calc(var(--k) * 1.2)) scale(.99)}
.kortti__kuva{display:block;aspect-ratio:3/2;overflow:hidden;
  background:linear-gradient(150deg,#fff6d6,#ffe9bd)}
.kortti__kuva img{width:100%;height:100%;object-fit:contain;padding:10%;
  transition:transform .5s ease}
.kortti-pino:hover .kortti__kuva img{transform:scale(1.06) rotate(-3deg)}
.kortti__teksti{display:block;padding:20px 22px 24px}
.kortti__aiheet{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.kortti__aihe{--pv:var(--o1);font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--pv);border-radius:999px;
  padding:3px 10px;text-decoration:none}
.kortti__otsikko{font-family:var(--display);font-weight:600;color:var(--navy);
  font-size:1.32rem;line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}
.kortti__ingressi{margin:0 0 14px;color:var(--muste-haalea);font-size:.97rem}
.kortti__meta{font-size:.83rem;font-weight:600;color:var(--blue)}

/* Iso nosto */
.kortti-pino--iso .kortti{display:grid;grid-template-columns:1.05fr 1fr}
.kortti-pino--iso .kortti__kuva{aspect-ratio:auto;min-height:100%}
.kortti-pino--iso .kortti__teksti{align-self:center;padding:clamp(24px,3vw,42px)}
.kortti-pino--iso .kortti__otsikko{font-size:clamp(1.6rem,3vw,2.3rem)}
.kortti-pino--iso .kortti__ingressi{font-size:1.06rem}
@media(max-width:680px){.kortti-pino--iso .kortti{grid-template-columns:1fr}
  .kortti-pino--iso .kortti__kuva{aspect-ratio:3/2}}

/* ---------- Aihesivun & artikkelin värihero ---------------------- */
.aihehero,.art__hero{position:relative;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--pv) 22%, #fff) 0%,
    color-mix(in srgb, var(--pv) 8%, var(--paperi)) 100%)}
.aihehero__sisus{display:flex;gap:clamp(18px,3vw,40px);align-items:center;
  padding-block:clamp(40px,6vw,72px) clamp(46px,7vw,82px);flex-wrap:wrap}
.aihehero__kuvitus{width:clamp(110px,16vw,180px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(40,55,120,.22));flex:0 0 auto}
.aihehero__otsikko{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:clamp(2.4rem,6vw,4rem);margin:.1em 0 .15em;letter-spacing:-.025em;line-height:.96}
.aihehero__kuvaus{font-family:var(--display);font-style:italic;color:var(--navy);
  font-size:clamp(1.05rem,2vw,1.35rem);max-width:46ch;margin:0;opacity:.9}
.muru{font-size:.86rem;font-weight:600;color:var(--blue)}
.muru a{color:var(--blue);text-decoration:none}
.muru a:hover{text-decoration:underline}
.muru--vaalea,.muru--vaalea a{color:var(--navy)}

/* ---------- Artikkeli -------------------------------------------- */
.art__hero-sisus{padding-block:clamp(36px,5vw,64px) clamp(46px,7vw,80px);text-align:center}
.art__aiheet{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.art__otsikko{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1.02;letter-spacing:-.025em;
  margin:0 auto;max-width:18ch}
.art__ingressi{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.5rem);
  color:var(--navy);max-width:40ch;margin:18px auto 0;opacity:.9}
.art__meta{font-weight:600;color:var(--blue);margin-top:18px}
.art__kansikuva{margin-top:-30px;position:relative;z-index:4}
.art__kansikuva img{width:100%;border-radius:var(--pyoreys);box-shadow:var(--varjo)}

.art__runko{font-size:1.16rem;line-height:1.78;color:#2a2d36;padding-block:clamp(30px,4vw,48px)}
.art__runko>*{margin-block:0 1.15em}
.art__runko h2{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:clamp(1.6rem,3vw,2.1rem);margin-top:1.6em;letter-spacing:-.015em}
.art__runko h3{font-family:var(--display);font-weight:600;color:var(--navy);font-size:1.4rem;margin-top:1.4em}
.art__runko a{color:var(--o2);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.art__runko blockquote{margin-inline:0;padding:.4em 0 .4em 1.1em;
  border-left:5px solid var(--o1);font-family:var(--display);font-style:italic;
  font-size:1.22rem;color:var(--navy)}
.art__runko img{border-radius:18px;box-shadow:var(--varjo-pehmea);margin-inline:auto}
.art__runko ul,.art__runko ol{padding-left:1.3em}
.art__runko li{margin-block:.4em}
.art__runko code{background:var(--paperi-tumma);padding:.12em .4em;border-radius:6px;font-size:.9em}
.art__runko hr{border:0;height:3px;background:linear-gradient(90deg,var(--y2),var(--o2));
  border-radius:3px;opacity:.6;margin-block:2em}

/* Rönsy-accordion (aurinkoinen vaaleankeltainen) */
.ronsy{background:linear-gradient(180deg,#fffbe0,#fff4c2);
  border:2px solid var(--y3);border-radius:18px;padding:2px 20px;margin-block:1.6em;
  box-shadow:0 6px 18px -14px rgba(245,155,0,.7)}
.ronsy>summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  color:var(--navy);font-size:1.12rem;padding:16px 0;display:flex;align-items:center;gap:12px}
.ronsy>summary::-webkit-details-marker{display:none}
.ronsy-merkki{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--o1);position:relative;transition:transform .3s ease}
.ronsy-merkki::before,.ronsy-merkki::after{content:"";position:absolute;background:#fff;border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%)}
.ronsy-merkki::before{width:12px;height:2.5px}
.ronsy-merkki::after{width:2.5px;height:12px;transition:transform .3s ease}
.ronsy[open] .ronsy-merkki{transform:rotate(135deg)}
.ronsy[open] .ronsy-merkki::after{transform:translate(-50%,-50%) scaleY(0)}
.ronsy-sisus{padding-bottom:18px;font-size:1.05rem;line-height:1.7}
.ronsy-sisus>*:first-child{margin-top:0}

/* Upotukset */
.upotus{margin-block:1.6em}
.upotus--video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:var(--varjo)}
.upotus--video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.upotus--x,.upotus--insta{display:flex;justify-content:center}

.art__jalkilause{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding-block:8px 40px;border-top:2px dashed rgba(50,110,180,.25);margin-top:10px}
.jaa-x{background:var(--navy);color:#fff;text-decoration:none;font-weight:700;
  padding:11px 22px;border-radius:999px;transition:transform .18s}
.jaa-x:hover{transform:translateY(-2px)}
.takasin,.takaisin{margin-left:auto;font-weight:700;color:var(--blue);text-decoration:none}
.osio--liittyvat{padding-top:0}

/* ---------- Footer (kaksivärinen, aaltoreuna) -------------------- */
.footer{position:relative;background:var(--navy);color:#dfe6f5;margin-top:80px}
.footer__aalto{position:absolute;left:0;top:0;width:100%;height:clamp(70px,9vw,140px);
  transform:translateY(-99%)}
.footer__aalto-takana{fill:var(--blue)}
.footer__aalto-edessa{fill:var(--navy)}
.footer__sisus{padding-block:clamp(34px,5vw,56px)}
.footer__brandi{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.footer__brandi img{border-radius:50%}
.footer__nimi{font-family:var(--display);font-weight:900;color:#fff;font-size:1.5rem;margin:0}
.footer__lause{margin:.2em 0 0;color:#aebbdb;font-style:italic;font-family:var(--display)}
.footer__aiheet{display:flex;flex-wrap:wrap;gap:8px 22px;padding-block:22px;
  border-block:1px solid rgba(255,255,255,.14)}
.footer__aiheet a{color:#cdd7ee;text-decoration:none;font-weight:600}
.footer__aiheet a:hover{color:var(--y2)}
.footer__alarivi{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;
  padding-top:22px;font-size:.9rem;color:#9fafd0}
.footer__alarivi a{color:#cdd7ee;text-decoration:none}
.footer__alarivi a:hover{color:var(--y2)}

/* ---------- Sekalaista ------------------------------------------ */
.tyhja{font-family:var(--display);font-size:1.3rem;color:var(--navy);text-align:center;padding-block:40px}
.virhe{text-align:center}
.virhe__numero{font-family:var(--display);font-weight:900;color:var(--o2);font-size:clamp(5rem,18vw,11rem);margin:.2em 0 0;line-height:1}
.virhe__teksti{font-family:var(--display);font-style:italic;color:var(--navy);font-size:1.4rem;margin-bottom:24px}

/* ---------- Liike pois jos käyttäjä niin haluaa ----------------- */
@media (prefers-reduced-motion: reduce){
  .hero__voikukka{animation:none}
  *{transition-duration:.001ms !important}
}

/* ================================================================
   EVÄSTEET, UPOTUSTEN SUOSTUMUSESTO & TIETOSUOJA
   ================================================================ */

/* ---------- Evästebanneri ---------------------------------------- */
.evaste{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:clamp(14px,3vw,22px);
  animation:evaste-nouse .4s ease both}
.evaste[hidden]{display:none}
@keyframes evaste-nouse{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
.evaste__sisus{max-width:1100px;margin:0 auto;
  background:linear-gradient(180deg,#fffdf5,#fff7df);
  border:2px solid var(--y3);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(40,55,120,.22),0 0 0 6px rgba(255,229,0,.10);
  padding:clamp(16px,2.5vw,24px) clamp(18px,3vw,28px);
  display:flex;gap:20px 28px;align-items:center;flex-wrap:wrap;
  position:relative;overflow:hidden}
.evaste__sisus::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,var(--y2),transparent 70%);opacity:.5;pointer-events:none}
.evaste__teksti{flex:1;min-width:260px;position:relative}
.evaste__otsikko{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:1.2rem;margin:0 0 4px}
.evaste__leipa{margin:0;color:#4a4636;font-size:.98rem;line-height:1.55}
.evaste__leipa a{color:var(--o2);font-weight:700}
.evaste__napit{display:flex;gap:12px;flex-wrap:wrap;position:relative}
.evaste__nappi{border:0;cursor:pointer;border-radius:999px;
  padding:13px 24px;font:inherit;font-weight:700;font-size:1rem;
  transition:transform .15s ease,box-shadow .15s ease}
.evaste__nappi:hover{transform:translateY(-2px)}
.evaste__nappi--ensisij{background:linear-gradient(180deg,var(--o1),var(--o2));color:#fff;
  box-shadow:0 8px 20px rgba(240,100,10,.35)}
.evaste__nappi--toissij{background:#fff;color:var(--navy);border:2px solid #e3ddc7}
.evaste__nappi--toissij:hover{border-color:var(--navy)}

/* Footerin tekstinappi (näyttää linkiltä) */
.footer__evastenappi{background:none;border:0;padding:0;cursor:pointer;
  color:#cdd7ee;font:inherit;font-weight:600}
.footer__evastenappi:hover{color:var(--y2)}

/* ---------- Upotuksen suostumusesto ------------------------------ */
.upotus--esto{position:relative;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%,rgba(255,229,0,.18),transparent 60%),
    linear-gradient(180deg,#fffdf5,#fff3cf);
  border:2px dashed var(--y3);
  text-align:center;
  padding:clamp(22px,5vw,40px) clamp(18px,4vw,32px)}
.upotus-esto__sisus{max-width:460px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:8px}
.upotus-esto__alusta{display:inline-block;font-family:var(--display);font-weight:900;
  color:var(--navy);font-size:1.15rem;
  background:#fff;border:2px solid var(--y3);border-radius:999px;padding:4px 16px}
.upotus-esto__teksti{margin:2px 0 6px;color:#5a543f;font-size:.95rem;line-height:1.5}
.upotus-esto__nappi{border:0;cursor:pointer;border-radius:999px;
  background:linear-gradient(180deg,var(--o1),var(--o2));color:#fff;
  padding:12px 26px;font:inherit;font-weight:700;
  box-shadow:0 8px 20px rgba(240,100,10,.3);transition:transform .15s ease}
.upotus-esto__nappi:hover{transform:translateY(-2px)}
.upotus-esto__linkki{color:var(--blue);font-weight:600;font-size:.9rem;text-decoration:none}
.upotus-esto__linkki:hover{text-decoration:underline}

/* ---------- Tietosuojaseloste ------------------------------------ */
.seloste{padding-block:clamp(30px,5vw,56px)}
.seloste__otsikko{font-family:var(--display);font-weight:900;color:var(--navy);
  font-size:clamp(2rem,6vw,3rem);line-height:1.05;margin:.2em 0 .3em}
.seloste__joht{font-size:1.1rem;color:#3a3a3a;line-height:1.6}
.seloste__pvm{color:#8a8470;font-size:.9rem;font-style:italic;margin-top:-.2em}
.seloste h2{font-family:var(--display);font-weight:600;color:var(--navy);
  font-size:1.4rem;margin-top:1.9em;
  padding-bottom:.25em;border-bottom:3px solid;
  border-image:linear-gradient(90deg,var(--y2),var(--o1)) 1}
.seloste p,.seloste li{line-height:1.7;color:#262626}
.seloste a{color:var(--o2);font-weight:600}
.seloste ul{padding-left:1.2em}
.seloste li{margin:.4em 0}
.seloste code{background:#fff5cf;border:1px solid var(--y3);border-radius:6px;
  padding:1px 6px;font-size:.92em}
.seloste__nappi{border:0;cursor:pointer;background:var(--navy);color:#fff;
  border-radius:999px;padding:8px 18px;font:inherit;font-weight:700;font-size:.95rem}
.seloste__nappi:hover{background:var(--blue)}
.seloste__takaisin{margin-top:2.5em}

.taulukko-kaari{overflow-x:auto;border-radius:16px;border:2px solid #f0e6c2;margin:1em 0}
.seloste__taulukko{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.seloste__taulukko th,.seloste__taulukko td{text-align:left;padding:12px 14px;
  border-bottom:1px solid #f0e6c2;vertical-align:top}
.seloste__taulukko thead th{background:linear-gradient(180deg,var(--y1),var(--y3));
  color:var(--navy);font-family:var(--display);font-weight:700}
.seloste__taulukko tbody tr:last-child td{border-bottom:0}
.seloste__taulukko tbody tr:nth-child(even){background:#fffaf0}