/* ============================================================
   IDEOLOGIA-ALASIVU (Jenna 21.10.2026)
   1. Alku – tumma, otsikko ja ydinlause
   2. Rikostaulu – palat kiinni taulussa, punaiset langat HI:stä.
      Desktopilla (≥ 1100 px ja ≥ 600 px korkea) taulu on 1440×960 px
      "paperi", joka skaalataan ruutuun (--s, ideologia.js) ja
      pinnataan; kapealla palat allekkain ilman pinnausta.
   3. Case – mikä tässä sivustossa on koneen, mikä käsin tehtyä
   Taustat: tumma (--musta) ja beige (--kerma). Liike: ideologia.js.
   ============================================================ */
html:has(.sivu-ideologia){ overflow-x:clip; }
.sivu-ideologia{ --ease:cubic-bezier(.16,1,.3,1); background:var(--musta); color:var(--kerma); }
.kasi{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; }

/* Oikea ylänurkka ja MENU keskellä ylhäällä kuten muilla alasivuilla. */
.p-kulma{
  position:fixed; top:var(--reuna); right:var(--reuna); z-index:70;
  display:grid; justify-items:end; gap:clamp(8px,.8vw,12px);
}
/* Leima näkyy sekä tummalla että beigellä. */
.p-kulma .leima-oikea{ position:static; font-family:var(--f-nav); letter-spacing:.01em;
  color:var(--kerma); mix-blend-mode:difference; }
.p-menu{
  font-family:var(--f-otsikko); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(16px,1.45vw,24px); line-height:1;
  color:var(--kerma); background:var(--puna);
  padding:.7em 1.4em .65em; border-radius:999px;
  transition:background 260ms linear, color 260ms linear;
}
.p-menu:hover{ background:var(--musta); }
.p-kulma .p-menu{
  position:fixed; left:0; right:0; top:clamp(14px,1.8vw,26px);
  width:max-content; margin-inline:auto; z-index:70;
}
@media (max-width:700px){ .p-menu{ font-size:13px; padding:.65em 1.2em .6em; } }

/* ------------------------------------------------------------
   1. ALKU
   ------------------------------------------------------------ */
/* Sama asettelu ja koot kuin Bränditalon herossa (.bh, Jenna 21.10.2026). */
.i-alku{
  position:relative; min-height:100svh; display:grid; place-content:center; justify-items:center; text-align:center;
  padding:clamp(100px,12vh,160px) var(--reuna) clamp(40px,8vh,90px); gap:clamp(14px,2vw,30px);
}
.i-alku > *{ margin:0; }
.i-alku__kulma{ font-family:var(--f-eyebrow); color:var(--puna); font-size:clamp(30px,3.8vw,68px); line-height:1; }
.i-alku__ot{
  font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; letter-spacing:-.015em;
  font-size:min(23vw, 42svh); line-height:1; padding-top:.1em; color:#ECE7DC;
}
.i-alku__lause{
  max-width:44ch; font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(16px,1.6vw,26px); line-height:1.3;
}

/* ------------------------------------------------------------
   2. RIKOSTAULU
   ------------------------------------------------------------ */
.i-taulu{ position:relative; }
.i-taulu__pinta{ position:relative; }

/* Langat ja nastat (ideologia.js piirtää) */
.i-langat{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible;
  pointer-events:none; z-index:1; }
.i-lanka{ fill:none; stroke:var(--puna); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:1 1; filter:drop-shadow(0 3px 2px rgba(0,0,0,.45)); }

/* HI: sama käsin piirretty kuva kuin etusivulla, punaisena. */
.i-hi{ position:relative; z-index:4; display:grid; justify-items:center; gap:12px; }
.i-hi__kuva{ position:relative; display:block; width:100%; aspect-ratio:1400/1034;
  animation:hi-varina .42s steps(1) infinite; }
.i-hi__kuva::before, .i-hi__kuva::after{
  content:''; position:absolute; inset:0; background:var(--puna);
  -webkit-mask:url('../img/hi/hi-1-alfa.webp') center / contain no-repeat;
          mask:url('../img/hi/hi-1-alfa.webp') center / contain no-repeat;
  /* Alfamaski (ei luminance): iOS Safari ei tue mask-mode:luminance, ja HI jäi näkymättä (21.10.2026). */
}
.i-hi__kuva::after{ -webkit-mask-image:url('../img/hi/hi-2-alfa.webp'); mask-image:url('../img/hi/hi-2-alfa.webp'); opacity:0; }
html.hi-b .i-hi__kuva::before{ opacity:0; }
html.hi-b .i-hi__kuva::after{ opacity:1; }
.i-hi__leima{ color:var(--kerma); }
@media (prefers-reduced-motion: reduce){ .i-hi__kuva{ animation:none; } }

/* Pala: paperi kiinni taulussa, nasta yläreunan keskellä. */
.i-pala{
  position:relative; z-index:2; background:var(--kerma); color:var(--musta);
  padding:34px 26px 24px; rotate:var(--r,0deg);
  font-size:14px; line-height:1.6;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 14px 30px -12px rgba(0,0,0,.7);
  /* aukeaminen nastasta alaspäin (ideologia.js liu'uttaa --kiinni-arvoa) */
  /* ylhäällä 90 px: vino käsinkirjoitettu merkintä Ä-pisteineen mahtuu (Jenna 26.10.) */
  clip-path:inset(-90px -40px var(--kiinni, -40px) -40px);
}
.i-pala > * + *{ margin-top:.8em; }
/* Nasta, johon lanka päättyy (ideologia.js laskee saman pisteen). */
.i-pala::before{ content:''; position:absolute; left:50%; top:6px; width:14px; height:14px; margin-left:-7px;
  border-radius:50%; background:radial-gradient(circle at 35% 35%, #ff8a66 0 2px, var(--puna) 3px);
  box-shadow:0 2px 3px rgba(0,0,0,.5); }
/* Eyebrow lapun sisällä (Jenna 26.10.: Hesteria, kuten muiden sivujen eyebrowt;
   aiemmin iso vino käsiala puoliksi lapun yli). */
.i-pala__merkki{ display:block; font-family:var(--f-eyebrow); text-transform:capitalize; color:var(--puna);
  font-size:38px; line-height:1; margin:0; }
.i-pala > .i-pala__merkki + *{ margin-top:.2em; }
/* Otsikot isommiksi (Jenna 26.10.) */
.i-pala__ot{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:36px; line-height:1.04;
  letter-spacing:.01em; }
.i-pala__lista{ display:grid; gap:.55em; }
.i-pala__lista li{ position:relative; padding-left:1.3em; }
.i-pala__lista li::before{ content:'×'; position:absolute; left:0; color:var(--puna); font-weight:700; }
.i-pala b{ font-weight:700; }
/* Korostus: Jennan miellekartan keltainen yliviivaus sivuston punaisella. */
.i-pala__korostus{ font-weight:700; }
.i-pala__korostus span{ background:var(--puna); color:var(--kerma); padding:.08em .25em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.i-pala__luku{ position:relative; font-family:var(--f-otsikko); color:var(--puna);
  font-size:96px; line-height:.9; width:max-content; margin-top:.1em; }
.i-luku{ position:relative; display:inline-block; isolation:isolate; padding:0 .12em; }
.i-luku .tussi-el--ympyra{ left:-14%; width:128%; top:50%; aspect-ratio:900/634; translate:0 -50%;
  color:var(--musta); z-index:-1; }
.i-pala__lahde{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; opacity:.55; }
.i-pala__linkki{ display:inline-block; font-weight:700; border-bottom:2px solid var(--puna); }
.i-pala__linkki:hover{ color:var(--puna); }

/* DESKTOP: 1800×1240 taulu, jota "kamera" (ideologia.js) liikuttaa ja
   skaalaa: lanka kerrallaan HI:stä palaan, lopuksi koko taulu. */
@media (min-width:1100px) and (min-height:600px){
  .i-taulu__kehys{ position:relative; height:100vh; overflow:hidden; }
  .i-taulu__pinta{ position:absolute; left:0; top:0; width:1800px; height:1240px; transform-origin:0 0; }
  .i-hi{ position:absolute; left:770px; top:520px; width:260px; }
  .i-pala{ position:absolute; }
  .i-pala--ydin    { left:80px;   top:90px;  width:450px; }
  .i-pala--tyonjako{ left:130px;  top:700px; width:430px; }
  .i-pala--jannite { left:690px;  top:50px;  width:420px; }
  .i-pala--hyoty   { left:1270px; top:80px;  width:450px; }
  .i-pala--asiakas { left:1250px; top:690px; width:460px; }
  .i-pala--case    { left:730px;  top:900px; width:340px; }
}

/* KAPEA: allekkain, lanka kulkee palojen läpi. */
@media not ((min-width:1100px) and (min-height:600px)){
  .i-taulu__pinta{ display:flex; flex-direction:column; gap:72px;
    padding:20px var(--reuna) 110px; max-width:620px; margin-inline:auto; }
  .i-hi{ width:min(62vw,300px); margin:0 auto 6px; }
  .i-pala:nth-of-type(odd){ margin-right:6%; }
  .i-pala:nth-of-type(even){ margin-left:6%; }
}
@media (max-width:480px){
  .i-pala{ font-size:13px; padding:32px 20px 22px; }
  .i-pala__merkki{ font-size:32px; }
  .i-pala__ot{ font-size:30px; }
  .i-pala__luku{ font-size:78px; }
}

/* Ennen JS:ää palat piilossa, ettei valmis taulu välähdä. */
.i-liike .i-pala, .i-liike .i-lanka{ visibility:hidden; }

/* ------------------------------------------------------------
   3. CASE
   ------------------------------------------------------------ */
.i-case{ background:var(--kerma); color:var(--musta);
  /* sisältö keskelle enintään 1180 px leveäksi, ei reunasta reunaan (Jenna 21.10.) */
  padding:clamp(90px,12vw,190px) max(var(--reuna), calc((100% - 1180px) / 2)) clamp(90px,10vw,160px); }
.i-case__eyebrow{ font-family:var(--f-eyebrow); color:var(--puna); font-size:clamp(30px,3.8vw,68px); line-height:1;   /* sama kuin Palvelut- ja Bränditalo-heroissa */ }
.i-case__ot{ font-family:var(--f-otsikko); text-transform:uppercase; line-height:.95;
  font-size:clamp(44px,8.4vw,150px); margin-top:.15em; max-width:12em; }
.i-case__sarakkeet{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px);
  margin-top:clamp(48px,6vw,96px); }
.i-case__alaot{ position:relative; width:max-content; font-family:var(--f-nav); text-transform:uppercase;
  font-size:clamp(18px,1.7vw,28px); line-height:1.2; letter-spacing:.02em; margin-bottom:.9em; isolation:isolate; }
.i-case__alaot .tussi-el--alleviivaus{ left:-4%; width:108%; bottom:-.45em; aspect-ratio:900/199; color:var(--puna); z-index:-1; }
.i-case__sarakkeet{ align-items:start; }
/* ikkunan yläreuna vihon tasalle (vasemmalla otsikko vihon yläpuolella) */
@media (min-width:701px){ .i-ikkuna{ margin-top:calc(clamp(18px,1.7vw,28px) * 2.1 + 6px); } }

/* Otsikko: kirjaimet nousevat maskin takaa vinoina kuten About us (ideologia.js). */
.i-case__ot .i-maski{ display:inline-block; overflow:clip; overflow-clip-margin:.04em; padding:.08em .3em 0; margin:-.08em -.3em 0; }

/* KÄSIN TEHTY: vihon sivu. Viivat ja punainen marginaali, rivit kirjoittuvat. */
.i-vihko{
  --rivi:46px;
  position:relative; background:var(--kerma); rotate:-1.2deg;
  padding:calc(var(--rivi) * .9) 22px calc(var(--rivi) * .6) 64px;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rivi) - 1px), rgba(25,25,25,.16) calc(var(--rivi) - 1px) var(--rivi));
  background-position:0 calc(var(--rivi) * .9 - 4px);   /* viiva kirjoituksen alle */
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 22px 40px -22px rgba(25,25,25,.55);
}
/* marginaaliviiva omana elementtinä: kierretyssä liukuvärissä se sahasi (Jenna 23.10.) */
.i-vihko::after{ content:''; position:absolute; left:46px; top:0; bottom:0; width:2px;
  background:rgba(255,54,0,.55); }
@media (max-width:700px){ .i-vihko::after{ left:40px; } }
/* rei'itys vasemmassa reunassa */
.i-vihko::before{ content:''; position:absolute; left:14px; top:24px; bottom:24px; width:12px;
  background:radial-gradient(circle, var(--kerma-2) 0 5px, transparent 6px) 0 0 / 12px 64px repeat-y; }
.i-vihko__lista{ position:relative; }
.i-vihko__lista li{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; font-size:36px; line-height:var(--rivi); color:#20283a;
  text-transform:none; }
.i-vihko__lista li:nth-child(odd){ rotate:-.6deg; }
.i-vihko__lista li:nth-child(even){ rotate:.5deg; padding-left:6px; }

/* Jennan käsiala kuvina: muste maskina, väri currentColorista. Teksti
   näkymättömänä vieressä ruudunlukijalle (Jenna 23.10.2026). */
.i-kasin{ display:inline-block; vertical-align:baseline; aspect-ratio:var(--suhde); background:currentColor;
  -webkit-mask:var(--kuva) left center / contain no-repeat; mask:var(--kuva) left center / contain no-repeat; }
.i-piilo{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.i-case__alaot--kasi .i-kasin{ height:1.5em; translate:0 .1em; }
/* rivin kirjainkorkeus ~ Rohasin versaalit; kuvassa viiva ja välit mukana */
/* Vihon rivit: tools/kasiala.py pilkkoo käsialan riveiksi (yksi kuva) ja
   sanoiksi (kuvan paloja). Sanat rivittyvät kapealla seuraavalle viivalle;
   jokainen pala on rivin korkuinen, joten viivat osuvat aina kohdalleen. */
.i-kasin-li{ display:block; }
.i-kasin-r{ display:flex; flex-wrap:wrap; column-gap:.28em; }
/* riippuva sisennys: rivittyvä sana alkaa viivan (–) jälkeen, ei sen alta */
.i-kasin-r:first-child{ padding-left:.53em !important; }
.i-kasin-r:first-child > .i-kasin-s:first-child{ margin-left:-.53em; }
.i-kasin-s{ display:block; height:var(--rivi); background:currentColor;
  -webkit-mask:var(--kuva) var(--x) calc(100% - .3em) / var(--lev) var(--kork) no-repeat;
          mask:var(--kuva) var(--x) calc(100% - .3em) / var(--lev) var(--kork) no-repeat; }

/* KONEEN RAKENTAMAA: retroikkuna. */
.i-ikkuna{ position:relative; background:var(--kerma); border:2px solid var(--musta);
  box-shadow:8px 8px 0 var(--musta); font-family:var(--f-mono); margin-top:.3em; }
.i-ikkuna__palkki{ display:flex; align-items:center; gap:10px; padding:6px 0 6px 8px; border-bottom:2px solid var(--musta);
  background:repeating-linear-gradient(180deg, var(--musta) 0 1px, transparent 1px 3px) center / 100% 11px no-repeat; }
.i-ikkuna__nimi{ margin:0 auto; padding:0 12px; background:var(--kerma); font-weight:700;
  font-size:clamp(13px,1vw,16px); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.i-ikkuna__napit{ display:flex; gap:2px; background:var(--kerma); padding:0 4px 0 8px; }
/* Windowsin painikkeet: pienennä, suurenna, sulje — ohuin mustin viivoin */
.i-nappi{ position:relative; width:30px; height:22px; }
.i-nappi::before, .i-nappi::after{ content:''; position:absolute; left:50%; top:50%; }
.i-nappi--pienennä::before{ width:12px; height:2px; background:var(--musta); translate:-50% -50%; }
.i-nappi--suurenna::before{ width:11px; height:11px; border:2px solid var(--musta); translate:-50% -50%; }
.i-nappi--sulje::before, .i-nappi--sulje::after{ width:15px; height:2px; background:var(--musta); translate:-50% -50%; rotate:45deg; }
.i-nappi--sulje::after{ rotate:-45deg; }
.i-ikkuna__tila{ display:flex; justify-content:space-between; padding:5px 12px; border-bottom:1px solid var(--musta);
  font-size:11px; letter-spacing:.06em; }
.i-ikkuna__sisus{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px 20px; padding:30px 22px 34px; }
.i-kansio{ display:grid; justify-items:center; gap:10px; text-align:center; font-size:clamp(12px,.9vw,14px); line-height:1.35; }
/* Kansio: välilehti + runko, punainen ja musta reuna kuin pikselikuvake. */
.i-kansio__kuva{ position:relative; width:64px; height:48px; margin-top:8px; background:var(--puna);
  border:2px solid var(--musta); border-radius:2px 4px 4px 4px; box-shadow:3px 3px 0 var(--musta); }
.i-kansio__kuva::before{ content:''; position:absolute; left:-2px; top:-10px; width:26px; height:9px;
  background:var(--puna); border:2px solid var(--musta); border-bottom:0; border-radius:3px 3px 0 0; }
.i-kansio__kuva::after{ content:''; position:absolute; left:4px; right:4px; top:8px; height:2px; background:rgba(25,25,25,.35); }
.i-kansio__nimi{ max-width:22ch; padding:1px 4px; }
.i-kansio:hover .i-kansio__nimi{ background:var(--musta); color:var(--kerma); }

/* Loppulause isona, sanat nousevat maskeistaan (ideologia.js). */
.i-case__loppu{ margin-top:clamp(70px,9vw,150px); font-family:var(--f-mono); font-weight:700; text-transform:uppercase;
  font-size:clamp(14px,1.25vw,20px); line-height:1.5; letter-spacing:.06em; max-width:none; }
.i-case__puna{ color:var(--puna); }
/* Jenna 23.10.: ylempi kappale pienenä monona johdantona, jälkimmäinen isona
   Sunterina, jolla on painoarvo. */
.i-case__loppu2{ display:block; margin-top:.5em; font-family:var(--f-otsikko); font-weight:400;
  font-size:clamp(44px,7.6vw,132px); line-height:.98; letter-spacing:.005em; max-width:13em; }
.i-case__loppu .i-maski{ display:inline-block; overflow:clip; overflow-clip-margin:.04em; padding:.1em .12em 0; margin:-.1em -.12em 0; }
.i-case__loppu .i-sana{ display:inline-block; transform-origin:0 100%; }
@media (max-width:700px){
  .i-vihko{ --rivi:40px; padding-left:56px; }
  .i-vihko__lista li{ font-size:29px; }
  .i-ikkuna__sisus{ padding:24px 14px 26px; gap:22px 12px; }
  .i-ikkuna{ box-shadow:6px 6px 0 var(--musta); margin-right:6px; }
}
@media (max-width:700px){ .i-case__sarakkeet{ grid-template-columns:1fr; gap:56px; } }

/* PUHELIMELLA (Jenna 23.10.2026): lappujen teksti luettavaksi. */
@media (max-width:700px){
  .i-pala{ font-size:15px; }
  .i-pala__lahde{ font-size:11px; }
  .i-kansio{ font-size:13px; }
}

/* Käytimme oman aikamme... (Iines 23.10.2026): isompi askelleveys pysty- ja
   vaakasuunnassa eli sanamaskeissa tilaa Ä-pisteille ja vinojen kirjainten
   reunoille; kirjain- ja riviväli ennallaan. */
.i-case__loppu2 .i-maski{ padding:.24em .3em .02em; margin:-.24em -.3em -.02em; overflow-clip-margin:0px; }