/* ============================================================
   TIIMI-ALASIVU (Iines 20.10.2026)
   1. Moi – otsikko ja polaroidit, jotka kääntyvät hiiren alla
   2. Pieni toimisto – lause ja toimistokuvat päällekkäin
   3. Historia ja filosofia
   Tausta beige (--kerma). Liike: tiimi.js, ks. CLAUDE.md Motion style.
   ============================================================ */
html:has(.sivu-tiimi){ overflow-x:clip; }
.sivu-tiimi{ --ease:cubic-bezier(.16,1,.3,1); background:var(--musta); color:var(--kerma); }   /* tumma, filmitausta takana (Iines 23.10.2026) */
.kasi{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; }
/* Filmin naarmut ja pöly taustalla, sisällön alla (Iines 23.10.2026). */
.t-filmi{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; opacity:.8; }
.sivu-tiimi main, .sivu-tiimi .footer{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .t-filmi{ display:none; } }

/* 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);
}
.p-kulma .leima-oikea{ position:static; font-family:var(--f-nav); letter-spacing:.01em; }
.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; } }

/* Alkutila ennen JS:ää: ei välähdystä valmiista asettelusta. */
.t-liike .t-moi__ot, .t-liike .t-pola, .t-liike .t-moi__ohje{ visibility:hidden; }

/* ------------------------------------------------------------
   1. MOI
   ------------------------------------------------------------ */
.t-moi{ position:relative; padding:clamp(120px,15vh,170px) var(--reuna) clamp(60px,8vw,120px); }
.t-moi__ot{
  font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; text-align:center;
  color:var(--puna); font-size:clamp(40px,7.2vw,136px); line-height:.9; letter-spacing:-.01em;
}
.t-moi__ot .t-merkki{ display:inline-block; }
.t-moi__ot .t-sana{ padding-inline:.3em; margin-inline:-.3em; }   /* symmetrinen: sana keskellä (Iines 23.10.2026) */   /* vino viimeinen kirjain leikkautui Macilla (Iines 22.10.2026) */
.t-moi__ohje{ text-align:center; font-size:clamp(20px,1.7vw,30px); rotate:-3deg; margin-top:.3em; }

.t-polat{ list-style:none; position:relative; height:clamp(700px,66vw,1120px); margin-top:clamp(30px,4vw,70px); }
.t-pola{
  /* Ihmiset isoina, koirat pieninä, sekaisin ilman teippejä (Iines 23.10.2026). */
  position:absolute; left:var(--x); top:var(--y); width:clamp(200px,20vw,360px); z-index:2;
  rotate:var(--r); perspective:1400px;
}
.t-pola__kortti{
  position:relative; display:block; width:100%; aspect-ratio:.86; padding:0; text-align:left; cursor:pointer;
  transform-style:preserve-3d; transition:transform 900ms var(--ease);
}
.t-pola--koira{ width:clamp(130px,12vw,210px); z-index:1; }
.t-pola:hover{ z-index:5; }
.t-pola:hover .t-pola__kortti, .t-pola__kortti[aria-pressed="true"]{ transform:rotateY(180deg); }
@media (hover:none){ .t-pola:hover .t-pola__kortti{ transform:none; } .t-pola__kortti[aria-pressed="true"]{ transform:rotateY(180deg); } }
.t-pola__etu, .t-pola__taka{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:#F7F4EC; box-shadow:0 1px 2px rgba(25,25,25,.12), 0 22px 40px -22px rgba(25,25,25,.55);
}
.t-pola__etu{ display:grid; grid-template-rows:auto 1fr; padding:clamp(7px,.6vw,11px) clamp(7px,.6vw,11px) 0; }
.t-pola__kuva{ display:block; aspect-ratio:1; overflow:hidden; background:#2a2a2a; }
.t-pola__kuva img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); }
.t-pola__kuva--tulossa{ display:grid; place-items:center; background:repeating-linear-gradient(-45deg,#d9d4c7 0 10px,#cfc9bb 10px 20px); }
.t-pola__kuva--tulossa span{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; font-size:clamp(20px,1.8vw,32px); color:#6b6558; }
.t-pola__nimi{ align-self:center; text-align:center; font-size:clamp(18px,1.5vw,26px); line-height:1; color:var(--musta); }
.t-pola__taka{
  transform:rotateY(180deg); display:grid; align-content:center; gap:.7em;
  padding:clamp(14px,1.3vw,22px); background:var(--musta); color:var(--kerma);
}
.t-pola__ala{ font-family:var(--f-mono); font-size:clamp(9px,.65vw,11px); letter-spacing:.12em; text-transform:uppercase; color:var(--puna); }
.t-pola__isonimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(22px,2vw,36px); line-height:.9; }
.t-pola__tieto{ font-family:var(--f-mono); font-size:clamp(10px,.72vw,12px); line-height:1.45; opacity:.85; }
.t-pola__posti{ font-family:var(--f-mono); font-size:clamp(10px,.72vw,12px); text-decoration:underline; text-underline-offset:.2em; }
/* Teippi kiinnittää osan kuvista */
.t-pola--teippi::before{
  content:''; position:absolute; z-index:2; left:50%; top:-12px; translate:-50% 0; rotate:-4deg;
  width:56%; height:26px; background:rgba(198,170,120,.72); box-shadow:0 1px 2px rgba(0,0,0,.12); pointer-events:none;
}

/* ------------------------------------------------------------
   2. PIENI TOIMISTO
   ------------------------------------------------------------ */
.t-pieni{ padding:clamp(60px,8vw,140px) var(--reuna) clamp(80px,10vw,160px); }
.t-pieni__ot{ display:grid; justify-items:end; gap:0;   /* vasen lause, iso rivi oikealla, lähekkäin (Iines 23.10.2026) */
  font-weight:400; max-width:1500px; margin-inline:auto; }
.t-pieni__pikku{ justify-self:start; margin-left:6%; font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(18px,1.6vw,30px); }
/* padding-right: vino huutomerkki ulottuu askelleveytensä yli, ja maski leikkasi sen. */
.t-pieni__iso{ display:block; overflow:hidden; padding-top:.08em; padding-inline:.3em; margin-inline:-.3em; font-family:var(--f-otsikko); text-transform:uppercase;
  font-size:clamp(46px,8.6vw,170px); line-height:.9; }
.t-rivi{ display:inline-block; }
/* Avaava teksti väliotsikon jälkeen, ennen kuvia (Iines 21.10.2026). */
.t-pieni__teksti{ display:grid; gap:1.1em; max-width:1500px; margin:clamp(28px,3.4vw,60px) auto 0;
  padding-left:clamp(0px,34%,560px); font-family:var(--f-mono); font-size:clamp(14px,1.1vw,18px); line-height:1.7; }
.t-pieni__teksti p{ max-width:56ch; }
.t-kollaasi{ position:relative; max-width:1500px; margin:clamp(40px,6vw,110px) auto 0; height:clamp(520px,52vw,860px); }
.t-kuva{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); z-index:var(--z); margin:0;
  box-shadow:0 26px 50px -26px rgba(25,25,25,.6);
}
.t-kuva img{ width:100%; height:auto; aspect-ratio:var(--suhde,3/2); object-fit:cover; display:block; }

/* ------------------------------------------------------------
   3. HISTORIA
   ------------------------------------------------------------ */
.t-historia{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px,5vw,100px);
  align-items:start; padding:clamp(40px,6vw,100px) var(--reuna) clamp(110px,12vw,200px); max-width:1600px; margin-inline:auto; }
.t-historia__vuosi{ font-family:var(--f-otsikko); color:var(--puna); font-size:clamp(90px,17vw,320px); line-height:.8; position:sticky; top:20vh; }
.t-historia__sisus{ display:grid; gap:clamp(20px,2.4vw,36px); justify-items:start; }
.t-historia__ot{ font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; font-size:clamp(34px,4vw,76px); line-height:.9; }
.t-historia__teksti{ display:grid; gap:1.1em; max-width:60ch; font-family:var(--f-mono); font-size:clamp(14px,1.1vw,18px); line-height:1.7; }
.t-historia__teksti a{ color:var(--puna); text-decoration:underline; text-underline-offset:.2em; }
.t-nappi{
  font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(18px,1.5vw,26px); line-height:1;
  padding:.8em 1.6em .75em; border-radius:999px; background:var(--puna); color:var(--kerma);
  transition:background 260ms linear;
}
.t-nappi:hover{ background:var(--musta); }

/* ------------------------------------------------------------
   KAPEA RUUTU
   ------------------------------------------------------------ */
@media (max-width:800px){
  .t-moi{ padding-top:110px; }
  /* Polaroidit kahteen sarakkeeseen, vinossa kuin pöydällä */
  .t-polat{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:22px 14px; padding:10px 4px 0; }
  .t-pola{ position:relative; left:auto; top:auto; width:100%; }
  .t-pola:nth-child(even){ margin-top:30px; }
  .t-pola__isonimi{ font-size:22px; }
  .t-pieni__pikku{ margin-left:0; }
  .t-pieni__teksti{ padding-left:0; }
  .t-kollaasi{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .t-kuva{ position:relative; left:auto; top:auto; width:auto; }
  .t-kuva:first-child, .t-kuva:nth-child(4){ grid-column:1 / -1; }
  .t-kuva:nth-child(2) img{ aspect-ratio:3/2; }
  .t-historia{ grid-template-columns:1fr; }
  .t-historia__vuosi{ position:static; }
}

@media (prefers-reduced-motion:reduce){ .t-pola__kortti{ transition:none; } }

/* Hero (.sivu-hero, brandstein.css): otsikko punainen kuten ennen,
   polaroidit alkavat heron alta. */
.t-moi{ padding-top:0; }
.t-moi__hero{ padding-inline:0; }
.t-moi__ot.sivu-hero__ot{ color:var(--puna); }
.sivu-tiimi .leima-oikea{ color:var(--kerma); }   /* tummalla pohjalla vaalea (Iines 23.10.2026) */

/* Codrops-efekti 9 (Embrace): kirjaimet omina laatikoinaan (tiimi.js). */
.t-pieni__iso{ overflow:visible; }
.t-k9{ display:inline-block; will-change:transform; }
/* Codrops-efekti 1: leipätekstin sanat (tiimi.js). */
.t-sana1{ display:inline; }

.t-pieni__iso{ margin-right:6%; }   /* oikealla, hieman sisempänä */
/* Väljempi kirjainväli isoon lauseeseen (Iines 23.10.2026). */
/* TIIMI keskelle (Iines 23.10.2026): vinon fontin muste alkaa ~0,1 em
   kirjaimen aloituskohdasta oikealla, joten sana näytti olevan oikealla. */
.t-moi__ot .t-sana{ position:relative; left:-.1em; }
/* Ja se on se juttu! (Iines 23.10.2026): kirjainväli ennallaan; isompi
   askelleveys eli jokaisella liikkuvalla kirjaimella tilaa sivuilla ja
   ylhäällä, ettei Safari rajaa vinon J:n tai !:n reunaa. */
.t-pieni__iso .t-sana9{ white-space:nowrap; }
.t-pieni__iso .t-k9{ display:inline-block; padding:.12em .25em 0; margin:-.12em -.25em 0; }

/* PUHELIMELLA (Jenna 23.10.2026): polaroidien pienet tekstit luettaviksi. */
@media (max-width:700px){
  .t-pola__ala{ font-size:11px; }
  .t-pola__tieto, .t-pola__posti{ font-size:13px; }
}

/* TIIMI PUHELIMELLA (Iines 23.10.2026): ensin ihmiset järjestyksessä Tuomas,
   Kati, Iines, Jenna, Essi, sitten koirat. Ei symmetristä ruudukkoa: korteilla
   eri leveydet, sivusiirrot ja pystysiirrot kuin pöydälle heitetyillä
   polaroideilla. */
@media (max-width:800px){
  .t-polat{ grid-template-columns:1fr 1fr; gap:10px 12px; align-items:start; }
  .t-pola, .t-pola:nth-child(even){ margin-top:0; }
  .t-pola:has(img[src$="tuomas.webp"]){ order:1; width:100%;  justify-self:start; margin-top:0; }
  .t-pola:has(img[src$="kati.webp"])  { order:2; width:84%;   justify-self:end;   margin-top:52px; }
  .t-pola:has(img[src$="iines.webp"]) { order:3; width:88%;   justify-self:end;   margin-top:-8px; }
  .t-pola:has(img[src$="jenna.webp"]) { order:4; width:100%;  justify-self:start; margin-top:26px; }
  .t-pola:has(img[src$="essi.webp"])  { order:5; width:94%;   justify-self:start; margin-top:4px; }
  .t-pola:has(img[src$="hertta.webp"]){ order:6; width:68%;   justify-self:center; margin-top:46px; }
  .t-pola:has(img[src$="irma.webp"])  { order:7; width:70%;   justify-self:end;   margin-top:6px; }
  .t-pola:has(img[src$="niilo.webp"]) { order:8; width:64%;   justify-self:start; margin-top:34px; }
}

/* PUHELIMELLA EI KIINTEÄÄ FILMIKERROSTA (Jenna 26.10.2026): koko ruudun
   kiinteä video esti iOS:ää näyttämästä sisältöä palkkien alla. */
@media (max-width:860px){
  .t-filmi{ display:none; }
  html:has(.sivu-tiimi){ overflow-x:visible; }
  /* Vaakaleikkuri osioihin: bodyn clip ei estä puhelimen näkymää levenemästä. */
  .sivu-tiimi > header, .sivu-tiimi > main, .sivu-tiimi > section{ overflow-x:clip; }
}

/* PUHELIMELLA otsikko isommaksi ennen leipätekstiä (Iines 26.10.2026). */
@media (max-width:700px){
  .t-pieni__pikku{ font-size:28px; }
  .t-pieni__iso{ font-size:17vw; margin-right:0; }
}

/* Koirien korttien takana vain titteli ja nimi, titteli isona (Iines 26.10.2026). */
.t-pola--koira .t-pola__ala{ font-size:clamp(15px,1.25vw,22px); letter-spacing:.08em; line-height:1.25; }
@media (max-width:700px){ .t-pola--koira .t-pola__ala{ font-size:13px; letter-spacing:.06em; } }
/* Kahvikuva jäi puhelimella kollaasin ulkopuolelle (Iines 26.10.2026). */
@media (max-width:800px){ .t-kuva:nth-child(5){ display:none; } }
/* Ja se on se juttu! punaisella (Iines 26.10.2026). */
.t-pieni__iso{ color:var(--puna); }
/* Kortin takapuoli paperina: tumma takapuoli katosi tummaan taustaan ja vain
   tekstit jäivät näkyviin (Iines 26.10.2026). Kääntö nopeammin. */
.t-pola__taka{ background:#F7F4EC; color:var(--musta); }
/* KORTIN KÄÄNTÖ ILMAN 3D-PINON VARAA (Iines 26.10.2026: puhelimella kortti katosi
   ja tekstit jäivät näkyviin). Kumpikin puoli kääntyy omana tasonaan omalla
   perspektiivillään, ja ne vaihtuvat tarkalleen puolivälissä (90°), joten
   kääntö toimii, vaikka selain litistäisi preserve-3d:n. Symmetrinen ease,
   jotta puoliväli ajassa on myös puoliväli kulmassa. */
.t-pola__kortti, .t-pola:hover .t-pola__kortti, .t-pola__kortti[aria-pressed="true"]{ transform:none !important; transition:none; }
.t-pola{ --kaanto:520ms; }
@media (max-width:800px){ .t-pola{ --kaanto:440ms; } }
.t-pola__etu, .t-pola__taka{
  transition:transform var(--kaanto) cubic-bezier(.45,0,.55,1), visibility 0s linear calc(var(--kaanto) / 2); }
.t-pola__etu{ transform:perspective(1400px) rotateY(0deg); }
.t-pola__taka{ transform:perspective(1400px) rotateY(180deg); visibility:hidden; }
.t-pola__kortti[aria-pressed="true"] .t-pola__etu{ transform:perspective(1400px) rotateY(-180deg); visibility:hidden; }
.t-pola__kortti[aria-pressed="true"] .t-pola__taka{ transform:perspective(1400px) rotateY(0deg); visibility:visible; }
@media (hover:hover){
  .t-pola:hover .t-pola__etu{ transform:perspective(1400px) rotateY(-180deg); visibility:hidden; }
  .t-pola:hover .t-pola__taka{ transform:perspective(1400px) rotateY(0deg); visibility:visible; }
}
/* Puhelimella kortin takapuolen tekstit mahtuvat korttiin (Iines 26.10.2026). */
@media (max-width:700px){
  .t-pola__taka{ padding:10px 10px 12px; gap:.45em; align-content:start; }
  .t-pola__ala{ font-size:9px; letter-spacing:.06em; line-height:1.35; }
  .t-pola--koira .t-pola__taka{ align-content:center; }
  .t-pola--koira .t-pola__ala{ font-size:13px; letter-spacing:.06em; line-height:1.3; }
  .t-pola--koira .t-pola__isonimi{ font-size:22px; }
  .t-pola__isonimi{ font-size:18px; }
  .t-pola__tieto, .t-pola__posti{ font-size:9.5px; line-height:1.4; letter-spacing:0; }
  .t-pola__posti{ overflow-wrap:anywhere; }
}
/* TOIMISTOKOLLAASI, 10 KUVAA (Iines 26.10.2026). Leveällä limittäin
   (paikat --x/--y/--w, korkeus kollaasin leveydestä), puhelimella
   kahteen sarakkeeseen: vaakakuvat koko leveydeltä, pystykuvat pareina. */
.t-kollaasi--10{ height:auto; aspect-ratio:1 / 1.02; }
@media (max-width:800px){
  .t-kollaasi--10{ aspect-ratio:auto; }
  .t-kollaasi--10 .t-kuva, .t-kollaasi--10 .t-kuva:nth-child(5){ display:block; grid-column:auto; }
  .t-kollaasi--10 .t-kuva img, .t-kollaasi--10 .t-kuva:nth-child(2) img{ aspect-ratio:4 / 5; }
  .t-kollaasi--10 .t-kuva:nth-child(1), .t-kollaasi--10 .t-kuva:nth-child(4),
  .t-kollaasi--10 .t-kuva:nth-child(9), .t-kollaasi--10 .t-kuva:nth-child(10){ grid-column:1 / -1; }
  .t-kollaasi--10 .t-kuva:nth-child(1) img, .t-kollaasi--10 .t-kuva:nth-child(4) img,
  .t-kollaasi--10 .t-kuva:nth-child(9) img, .t-kollaasi--10 .t-kuva:nth-child(10) img{ aspect-ratio:var(--suhde); }
}