/* ============================================================
   BRANDSTEIN
   Rakennettu leiskan mukaan. Itsenäinen: ei perittyjä tokeneita.

   EI TUMMAA TILAA. Brändisivu ei saa kääntyä ympäri käyttäjän
   järjestelmäasetuksesta — aiemmin starterin tokens.css teki juuri
   sen ja vaihtoi paletin oranssiksi mustalla pohjalla.
   ============================================================ */

:root{
  color-scheme: light only;

  /* Värit mitattu suoraan leiskatiedostoista */
  --kerma:   #E4DED0;
  --kerma-2: #CDC3AD;   /* --kerman sävy, ~11 % tummempi */
  --puna:    #FF3600;
  --musta:   #191919;
  --harmaa:  #606060;
  --hiekka:  #D8BFA3;
  --ruskea:  #3F2727;   /* art of branding (Jenna 8.10.2026) */

  /* Kohina maskiksi: vaalea = muste jää, tumma = syöpyy pois.
     Kontrasti pidetään matalana, muuten kirjaimet hajoavat. */
  --riso-kohina:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3CfeFuncR type='linear' slope='0.42' intercept='0.63'/%3E%3CfeFuncG type='linear' slope='0.42' intercept='0.63'/%3E%3CfeFuncB type='linear' slope='0.42' intercept='0.63'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");

  --f-display:'Sunter Roughen','Display Fallback',Impact,sans-serif;   /* Rockids poistettu 20.10.2026 (Jenna) */
  --f-kasi:   'Railway Gank','Hesteria Fallback',cursive;
  --f-eyebrow:'Hesteria','Hesteria Fallback',cursive;   /* otsikoiden yläpuoliset pienet tekstit (Jenna 20.10.2026) */
  /* Roolikohtaiset fontit, ks. fonts.css */
  --f-nimi:    'Monigue','Display Fallback',Impact,sans-serif;
  --f-otsikko: 'Sunter Roughen','Display Fallback',Impact,sans-serif;
  --f-nav:     'Boldeon','Display Fallback',Impact,sans-serif;
  --f-hi:      'Twicker','Display Fallback',Impact,sans-serif;
  --f-mono:   'JetBrains Mono','Mono Fallback',ui-monospace,monospace;

  --e: cubic-bezier(.32,.72,0,1);
  --reuna: clamp(16px,3.2vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Rockidsissa ja Hesteriassa on VAIN regular. Jos elementti pyytää
   lihavaa (esim. h1/h2 selaimen oletuksena), selain väärentää sen
   levittämällä ääriviivaa — teksti näyttää paksummalta kuin
   Illustratorissa. Tämä estää sen koko sivulta. */
html{ font-synthesis:none; -webkit-font-synthesis:none; }
html,body{ margin:0; padding:0; }
html{ background:var(--kerma); -webkit-text-size-adjust:100%; }
body{
  /* pillerin rata ankkuroituu tähän */
  position:relative;
  background:var(--kerma); color:var(--musta);
  font-family:var(--f-mono);
  font-size:clamp(12px,.85vw,14px); line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul{ margin:0; padding:0; }
h1,h2,h3,h4{ font-weight:400; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--reuna); top:var(--reuna); z-index:200;
  background:var(--musta); color:var(--kerma); padding:10px 16px; }

:focus-visible{ outline:3px solid var(--musta); outline-offset:3px; }

/* pieni versaalimerkintä — leiskan mono-tekstit */
/* Pysyy oikeassa ylänurkassa koko sivun ajan, ei osiokohtaisena. */
/* .meta-luokka määrittää myös fontin, joten yhdistelmävalitsin:
   pelkkä .leima-oikea hävisi sille järjestyksessä. */
.leima-oikea.meta{ font-family:var(--f-nav); }
.leima-oikea{
  position:fixed; top:var(--reuna); right:var(--reuna); z-index:70;
  color:var(--musta); pointer-events:none;
}
/* Puhelimella leima kahdelle riville: yhdellä rivillä se osui keskitettyyn
   MENU-pilleriin (rako 8 px 375 px:n ruudulla, Iines 21.10.2026). */
@media (max-width:480px){
  .leima-oikea, .p-kulma .leima-oikea{ max-width:7.4em; white-space:normal; text-align:right; line-height:1.1;
    font-size:10px !important; }
}

.meta{
  font-family:var(--f-display); font-size:clamp(11px,1.05vw,17px); font-weight:400;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.2;
}
/* pienet mono-merkinnät muualla sivulla */
.meta--mono{ font-family:var(--f-mono); font-size:clamp(8px,.62vw,10px);
  font-weight:700; letter-spacing:.18em; }
.kasi{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; }

/* ============================================================
   RISOPINTA — kuvatekstuuri.

   Proseduraalinen pisteruudukko on poistettu: se luki koneelliselta.
   Pinta tulee skannatusta tekstuurista, joka pudotetaan kansioon
   assets/riso/ ja kytketään yhdellä rivillä:

     .hero__nimi{ --riso-tekstuuri:url('../riso/tiedosto.png'); }

   Kuvaa luetaan LUMINANSSINA:
     valkoinen = muste jää    musta = muste syöpyy pois
     harmaa    = osittainen peitto  <- tästä epätasaisuus syntyy

   Oletus on läpinäkymätön valkoinen, eli ilman tekstuuria tämä
   luokka ei tee mitään — muste on tasaisen punainen.
   ============================================================ */
.riso{
  /* none = ei maskia lainkaan. TÄMÄ ON TÄRKEÄÄ: maski maalaa vain
     elementin laatikon sisään, ja versaalimuste nousee riviruudun
     yläpuolelle (line-height .78, muste .707 em). Neutraaliksi
     tarkoitettu valkoinen liukuväri ei ollut neutraali — se leikkasi
     kirjainten latvat, 61 px 2317 px:n ruudulla. */
  --riso-tekstuuri: none;
  -webkit-mask-image: var(--riso-tekstuuri);
          mask-image: var(--riso-tekstuuri);
  -webkit-mask-size: var(--riso-koko,cover);
          mask-size: var(--riso-koko,cover);
  -webkit-mask-repeat: var(--riso-toisto,no-repeat);
          mask-repeat: var(--riso-toisto,no-repeat);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
}
/* jos toimitettu tekstuuri on käänteinen (musta = muste) */
.riso--kaanteinen{ --riso-tekstuuri-suodin: invert(1); }

/* rae */
.rae{
  position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.2;
  mix-blend-mode:multiply;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.3' intercept='0.72'/%3E%3CfeFuncG type='linear' slope='0.3' intercept='0.72'/%3E%3CfeFuncB type='linear' slope='0.3' intercept='0.72'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   JÄTTINIMI — täyttää ruudun leveyden ja vuotaa reunojen yli.
   Koko asetetaan JS:llä mittaamalla, ei arvaamalla: vw-arvo
   vaihtelee fontin ja sanan mukaan eikä osu ilman mittausta.
   ============================================================ */
.jatti{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.78; letter-spacing:-.02em;
  white-space:nowrap; text-align:center;
  font-size:14vw;                 /* lähtöarvo, JS tarkentaa */
}

/* ============================================================
   1. HERO
   BRANDSTEIN koko ruudun leveydellä ja KOKONAAN näkyvissä
   (ei vuoda yli). Koko sovitetaan leveydestä, ks. brandstein.js.
   ============================================================ */
.hero{
  min-height:100dvh; display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(14px,1.8vw,26px) 0 clamp(22px,3vw,44px);
  /* Leikkuri VAIN vaakasuuntaan. Nimen kirjainväli jättää viimeisen
     merkin jälkeen tyhjää, joka muuten toisi vaakavierityspalkin.
     Pystysuunnassa ei leikata koskaan: jos jokin ympäristö laskee
     korkeuden eri tavalla kuin mittaukseni, nimi saa vuotaa — se on
     aina parempi kuin katkennut nimi. clip+visible on sallittu pari,
     toisin kuin hidden+visible joka muuttuisi auto:ksi. */
  overflow-x:clip; overflow-y:visible;
  /* Nimi on white-space:nowrap, joten sen max-content venytti ruudukon
     sarakkeen ruutua leveämmäksi — silloin koko hero siirtyi oikealle ja
     ylänurkan teksti valui reunan yli. minmax(0,1fr) sitoo sarakkeen
     ruudun leveyteen; nimi saa vuotaa oman laatikkonsa yli, se on
     keskitetty eikä vaikuta muiden rivien sijaintiin. */
  grid-template-columns:minmax(0,1fr);
}
.hero__yla{
  /* vasen ylänurkka on tarkoituksella tyhjä -> flex-end, ei tyhjää spania */
  display:flex; justify-content:flex-end; align-items:flex-start;
  gap:20px; padding-inline:clamp(14px,1.8vw,26px);
}
.hero__keski{ display:grid; align-content:center; justify-items:center; min-width:0; }

.hero__nimi{
  font-family:var(--f-nimi);
  color:var(--puna); display:block; width:100%;
  /* Laatikko kattamaan musteen, jottei riso-maski leikkaa latvoja.
     Negatiivinen margin kumoaa täytteen, joten asettelu ei muutu. */
  padding-top:.10em; margin-top:-.10em;
  /* translate, ei transform: pilleri- ja musteenkeskitys käyttävät
     transformia, eivätkä nämä saa kumota toisiaan. */
  translate:0 var(--par-nimi, 0px);
  /* Ääriviiva jää, kun täyte valuu pois (brandstein.js valutaNimi). */
  position:relative; color:transparent;
  -webkit-text-stroke:max(1.5px, .006em) var(--puna);
}
/* Täyte: sama teksti päällä. ::before perii fonttikoon ja kirjainvälin,
   jotka JS asettaa nimelle, joten kopio osuu aina tarkasti kohdalleen.
   Täytteessä ei ole ääriviivaa: muuten kirjaimet lihoisivat. */
.hero__nimi::before{
  content:attr(data-teksti);
  position:absolute; inset:0; padding-top:inherit;
  color:var(--puna); -webkit-text-stroke:0;
  clip-path:var(--valuma, none);
}

/* Käsiala limittyy nimen alakolmannekseen. Arvo on osuus KÄSIALAN
   omasta koosta; JS säätää sen logon korkeuden mukaan (--limitys),
   koska kaksi eri fonttikokoa eivät skaalaudu samassa suhteessa. */
/* Punaisen päällä kermaksi (brandstein.js, valuma). */
.hero__alaote.punaisella{ color:var(--kerma); }
/* Käsiala värisee hiukan (20.10.2026): nykivä, ei pomppiva. */
/* Vähemmän värinää (Iines 21.10.2026): noin kolmannes entisestä liikkeestä, harvemmin. */
@keyframes ote-varina{
  0%{ rotate:0deg; transform:translate(0,0); } 25%{ rotate:-.12deg; transform:translate(-.2px,.15px); }
  50%{ rotate:.08deg; transform:translate(.15px,-.15px); } 75%{ rotate:-.05deg; transform:translate(.1px,.2px); }
  100%{ rotate:0deg; transform:translate(0,0); }
}
@media (prefers-reduced-motion:no-preference){ .hero__alaote{ animation:ote-varina .9s steps(1) infinite; } }
.hero__alaote{
  font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; color:var(--ruskea);
  /* z-index 3: punainen valuma (.made__nousu, z 2) alkaa nimen alta ja
     kulkee tämän takaa; ilman tätä käsiala jäi punaisen alle. */
  line-height:1; margin:0; position:relative; z-index:3;
  transition:color 260ms linear;
  margin-top:0;   /* JS laskee musterajoista, ks. limitaKasiala */
  translate:0 var(--par-ote, 0px);
}

/* pilleri lähemmäs käsialaa */
.hero__ala{ display:flex; justify-content:center; padding-inline:0;
  margin-top:1.5%; }
.hero{ grid-template-rows:auto auto auto; align-content:center; }
/* Puhelimella matalampi hero: vähemmän tyhjää nimen ympärillä (Iines 22.10.2026). */
@media (max-width:700px){
  .hero{ min-height:72svh; }
  /* MENU-nappi luettavaksi puhelimella (fonttikoko tulee muuten ruudun korkeudesta). */
  .palkki__m{ font-size:15px !important; }
}
.hero__keski{ margin-bottom:0; }

/* --- pilleripalkki: leveä ja keskitetty --- */
/* Rata on absoluuttinen, joten se ei vie tilaa virrasta. JS asettaa sen
   yläreunan heron pilleripaikalle; alareuna on sivun loppu. Sticky-pilleri
   matkaa radan sisällä ja jää yläreunaan loppumatkaksi — ilman
   scroll-kuuntelijaa. */
.palkki-rata{
  position:absolute; left:0; right:0; bottom:0;
  z-index:60; pointer-events:none;
}
.palkki__tila{ height:var(--palkki-korkeus, 48px); }

.palkki{
  position:sticky; top:clamp(14px,1.8vw,26px);
  display:flex; justify-content:center; pointer-events:none; width:100%;
}
.palkki__p{
  pointer-events:auto;
  /* Mitattu leiskasta: leveys 0.741 W, korkeus 0.0408 W,
     tekstin musteen korkeus 0.0175 W. */
  display:flex; align-items:center; justify-content:space-evenly;
  /* Leiskasta: leveys 0.741 W, korkeus 0.0408 W -> kuvasuhde 18.16.
     Prosentti eikä vw, koska vw sisältää vierityspalkin ja tuo
     parin pikselin virheen. */
  /* Leveys ja korkeus tulevat JS:stä (sovitaPilleri): leiskan 0.741 W
     on lähtöarvo, mutta seitsemän nimeä tarvitsee enemmän tilaa kuin
     leiskan viisi. Korkeus pysyy leiskan 0.0408 W:ssä riippumatta
     leveydestä, siksi erillinen muuttuja eikä aspect-ratio. */
  width:var(--palkki-leveys,74.1%);
  height:var(--palkki-korkeus,auto);
  aspect-ratio:18.16; min-height:34px;
  background:var(--puna); color:var(--kerma);
  border-radius:999px;
  padding-inline:clamp(18px,2.2vw,38px);
  transition:width 620ms var(--e), padding 620ms var(--e), min-height 620ms var(--e);
}
.palkki__l{
  font-family:var(--f-nav); font-weight:400;
  /* Musteen korkeus asetetaan mittaamalla, ks. data-korkeus. */
  /* Suomen versaali-Ä nousee 0.837 em perusviivasta, mutta rivin
     yläreuna on line-height:1:llä vain 0.80 em — overflow:hidden
     leikkasi pisteet pois. 1.2 riittää (0.90 em). Pystysijainti
     tulee joka tapauksessa keskitaMuste():sta, ei rivin korkeudesta. */
  letter-spacing:.02em; line-height:1.32;
  text-transform:uppercase; white-space:nowrap;
  max-width:16ch; overflow:hidden;
  transition:max-width 620ms var(--e), opacity 280ms linear;
}
/* ROLLAAVA HOVER (Brandstein 2.0:n nav-roll)
   Kaksi päällekkäistä kopiota tekstistä. Hoverissa molemmat pyörähtävät
   YLÖSPÄIN vaaka-akselin ympäri: näkyvä poistuu ylös, kopio saapuu
   alhaalta. Linkin overflow:hidden on jo olemassa kutistusanimaatiota
   varten, ja se toimii tässä ikkunana. */
/* Perspektiivi EM:inä, ei pikseleinä. Brandstein 2.0:ssa navigaatio on
   12.8 px ja perspektiivi 150 px — suhde 11.72. Meillä teksti on 36–58 px,
   joten kiinteä 150 px tuottaisi aivan eri projektion: kirjaimet
   litistyivät paikalleen sen sijaan että kallistuisivat pois. */
.palkki__l, .palkki__m{ position:relative; }
.rulla{ display:block; white-space:nowrap; }
.rulla--sisaan{ position:absolute; top:0; left:0; pointer-events:none; }
.rulla__m{ display:inline-block; backface-visibility:hidden; }

/* HOVER: käsin piirretty alleviiva piirtyy sanan alle (brandstein.js).
   Ilman JS:ää vara-vaimennus. */
.palkki__l:hover{ opacity:.68; }
.palkki__l:has(.palkki__viiva):hover{ opacity:1; }
.palkki__viiva{ position:absolute; left:-2%; width:104%; bottom:.04em; height:.24em; overflow:visible;
  pointer-events:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round;
  vector-effect:non-scaling-stroke; }
/* opacity: pyöreä pää jäi muuten pisteeksi sanan alle levossa. */
.palkki__viiva path{ stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset 300ms cubic-bezier(.4,0,1,1), opacity 0s linear 300ms; }
.palkki__l:hover .palkki__viiva path, .palkki__l:focus-visible .palkki__viiva path,
.palkki__m:hover .palkki__viiva path, .palkki__m:focus-visible .palkki__viiva path{
  stroke-dashoffset:0; opacity:1; transition:stroke-dashoffset 520ms cubic-bezier(.16,1,.3,1), opacity 0s; }

/* Punaisella pohjalla värit toisin päin, jotta pilleri erottuu. */
.palkki--kaanteinen .palkki__p{ background:var(--kerma); color:var(--puna); }
/* Sama tausta kääntää myös ylänurkan leiman vaaleaksi. */
body.punaisella .leima-oikea{ color:var(--kerma); }
.palkki__m{
  font-family:var(--f-otsikko); font-weight:400;
  letter-spacing:.02em; line-height:1.2;
  text-transform:uppercase; white-space:nowrap;
  max-width:0; opacity:0; overflow:hidden;
  /* Sunter on kursiivi: U:n muste kallistuu kirjaimen oman leveyden yli,
     ja overflow:hidden leikkasi sen (laatikko 749 px, muste ~752 px,
     mitattu 9.10.). clip + marginaali antaa musteelle tilaa ilman että
     laatikko kasvaa. Safari ei tue marginaalia; siellä padding auttaa. */
  overflow:clip; overflow-clip-margin:.3em;
  padding-right:.16em;
  transition:max-width 620ms var(--e), opacity 280ms linear 160ms;
}
.palkki.kapea .palkki__l{ max-width:0; opacity:0; }
/* Leveys pikseleissä myös kapeassa tilassa: widthiä ei voi animoida
   arvoon auto, ja silloin pilleri napsahtaisi napiksi ilman siirtymää.
   JS mittaa MENU-napin tarvitseman leveyden. */
.palkki.kapea .palkki__p{
  width:var(--palkki-kapea, 12ch);
  aspect-ratio:auto;
  padding-inline:clamp(22px,2.4vw,38px);
}
.palkki.kapea .palkki__m{ max-width:10ch; opacity:1; }

/* --- vasemman ylänurkan leima --- */
.leima{ width:clamp(64px,7vw,104px); aspect-ratio:1; position:relative; flex:none; }
.leima svg{ width:100%; height:100%; }
.leima__kierto{ transform-origin:50% 50%; animation:leima-pyori 34s linear infinite; }
@keyframes leima-pyori{ to{ rotate:360deg; } }
.leima__keski{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; color:var(--puna);
  font-size:clamp(14px,1.5vw,23px); line-height:1;
}
@media (prefers-reduced-motion:reduce){ .leima__kierto{ animation:none; } }

/* ============================================================
   2. HI -> MADE WITH HUMAN INTELLIGENCE (20.10.2026)
   Punainen valuu ruudun täyteen (.made__nousu), punaisella on iso
   piirretty HI. Vieritys lentää HI:n sisään (brandstein.js): kermainen
   sisus kasvaa H:n varresta ja täyttää ruudun, ja siellä punaiset H ja I
   erkanevat ja niiden takaa avautuu "Made with Human Intelligence".
   ============================================================ */
.made{ position:relative; height:100dvh; overflow:clip; }
.made.kaynnissa{ background:var(--puna); }
/* Kynä kursorina vain HI-vaiheessa (Iines 23.10.2026; brandstein.js .kyna); kärki on kursorin kohta. */
.made.kyna, .made.kyna *{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M5%2027l2.2-6.6L22.6%205a2.4%202.4%200%200%201%203.4%200l1%201a2.4%202.4%200%200%201%200%203.4L11.6%2024.8z%27%20fill%3D%27%23E4DED0%27%20stroke%3D%27%23191919%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M20%207.6l4.4%204.4%27%20stroke%3D%27%23191919%27%20stroke-width%3D%271.8%27/%3E%3Cpath%20d%3D%27M5%2027l2.2-6.6%204.4%204.4z%27%20fill%3D%27%23191919%27/%3E%3C/svg%3E") 5 27, crosshair; }
/* Valuma pois (brandstein.js VALUMA): osio on alusta asti punainen. */
.made.ei-valumaa{ background:var(--puna); }
/* Punainen lammikoituu (brandstein.js): ruutuun kiinnitetty punainen kerros,
   jonka aaltoreuna nousee vierityksen mukana. Käsialan (3), HI-tason ja pillerin alla. */
.made__lammikko{ position:fixed; inset:0; z-index:2; background:var(--puna); pointer-events:none; visibility:hidden; }
.made.valmis .made__lammikko{ display:none; }

/* Valuva muste: ruudun kokoinen ja kiinteä. Pillerin (60) ja leiman (70)
   alla. Kohtauksen alkaessa piilotetaan (osio on silloin itse punainen). */
.made__nousu{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}

.hi-taso{
  position:absolute; inset:0; z-index:4;
  display:grid; grid-template-rows:auto 1fr; padding:var(--reuna) 0;
  color:var(--kerma); opacity:0; pointer-events:none;
}
.hi-taso .hi__yla{ display:flex; justify-content:space-between; padding-inline:var(--reuna); }
.hi-taso .hi__keski{ position:relative; }
/* --oikaisu siirtää MUSTEEN keskelle, ei laatikon. */
.hi__hi{
  font-family:var(--f-hi);
  position:absolute; left:50%; top:50%; margin:0;
  translate:-50% calc(-50% + var(--oikaisu, 0px));
  color:var(--kerma); z-index:5; line-height:.74;
  pointer-events:none; white-space:nowrap; will-change:transform;
}
/* HI värisee: piirroksen oma kahden kuvan vaihto (brandstein.js) ja
   pieni nykivä tärinä päälle. */
/* Rauhallisempi (Jenna 22.10.2026: "liian kiireinen ja äkäinen"):
   jakso .42 s -> .9 s ja liike noin 60 % entisestä. */
@keyframes hi-varina{
  0%{ translate:0 0; rotate:0deg; }  20%{ translate:-.9px .6px; rotate:-.15deg; }
  40%{ translate:.6px -.9px; rotate:.12deg; } 60%{ translate:-.6px -.3px; rotate:.09deg; }
  80%{ translate:.9px .6px; rotate:-.12deg; } 100%{ translate:0 0; rotate:0deg; }
}
.made.hi-esiin .hi__kuva{ animation:hi-varina .9s steps(1) infinite; }

/* Tussi: kävijä piirtää kursorilla punaiselle (Jenna 8.10.2026). */
.tussi{ position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; }

/* H:n sisus: kerma, joka kasvaa ympyränä polttopisteestä (JS). */
.made__sisus{
  position:absolute; inset:0; z-index:7;
  display:grid; place-content:center; justify-items:center;
  background:var(--kerma); color:var(--musta);
  -webkit-mask-image:linear-gradient(transparent,transparent); mask-image:linear-gradient(transparent,transparent);
}
.made__peite{ position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; }
.made__peite path{ fill:var(--kerma); opacity:0; }
.made.valmis .made__peite{ display:none; }
.made.valmis .made__sisus{ -webkit-mask-image:none; mask-image:none; }
.made.valmis .hi-taso{ display:none; }
/* VARATILA ILMAN ANIMAATIOTA (Iines 23.10.2026: "HI ei näy"): kun liike on
   pois (Vähennä liikettä tai skriptit eivät lataudu), HI näkyy silti omana
   punaisena ruutunaan kynäkursorilla, ja Made with on sen alla. */
.made.valmis{ height:auto; overflow:visible; background:var(--puna); }
.made.valmis .hi-taso{ display:grid; position:relative; inset:auto; height:100vh; height:100svh; opacity:1; visibility:visible; pointer-events:auto; cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M5%2027l2.2-6.6L22.6%205a2.4%202.4%200%200%201%203.4%200l1%201a2.4%202.4%200%200%201%200%203.4L11.6%2024.8z%27%20fill%3D%27%23E4DED0%27%20stroke%3D%27%23191919%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M20%207.6l4.4%204.4%27%20stroke%3D%27%23191919%27%20stroke-width%3D%271.8%27/%3E%3Cpath%20d%3D%27M5%2027l2.2-6.6%204.4%204.4z%27%20fill%3D%27%23191919%27/%3E%3C/svg%3E") 5 27, crosshair; }
.made.valmis .made__sisus{ position:relative; inset:auto; min-height:100vh; min-height:100svh; opacity:1; }
.made.valmis .made__nousu{ display:none; }
.made__leima-maski{ position:absolute; top:var(--reuna); left:var(--reuna); overflow:hidden; }
.made__leima{ display:block; }
.made__vaite{
  margin:0; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:-.01em; text-align:center; color:var(--musta);
  font-size:clamp(3rem,10vw,12rem);
}
.made__vaite .rivi{ display:block; white-space:nowrap; }
/* Made with nousee rivinsä maskin takaa; yläreunassa tilaa Ä-pisteille. */
/* Sivuilla myös tilaa: vinon fontin viimeinen kirjain ulottuu askelleveytensä yli,
   ja maski leikkasi sen (Iines 21.10.2026). */
.made__vaite .rivi{ overflow:hidden; padding:.12em .3em 0; margin:-.12em -.3em 0; }
.made__vaite .rivi__sisa{ display:inline-block; }
/* Sama Safari-rajaus kuin valikossa: liikkuva rivi tarvitsee tilaa vinolle viimeiselle kirjaimelle. */
.made__vaite .rivi__sisa{ padding-inline:.3em; margin-inline:-.3em; }
/* H ja I mustina kuten muu teksti (Iines 21.10.2026; ennen punaiset). */
.made__h, .made__i{ color:inherit; }
/* Human Intelligence punaisella (Iines 23.10.2026). */
.made__vaite .rivi--2{ color:var(--puna); }
/* Sana vaihtuu: Intelligence -> Intention -> Intuition (Iines 23.10.2026).
   Sanat pinossa samassa ruudussa, joka on pisimmän sanan levyinen; kirjaimet
   nousevat ruudun maskin takaa (brandstein.js). overflow:hidden molempiin
   suuntiin (pelkkä overflow-y:clip ei rajannut liikkuvia kirjaimia Chromessa);
   sivuilla askelleveyttä vinoille kirjaimille. */
.made__vaihto{ display:inline-grid; justify-items:start; vertical-align:top; overflow:hidden;
  /* Maski kirjainten musteen korkuiseksi (mitattu: muste alkaa .11em laatikon
     yläreunasta ja päättyy .2em ennen alareunaa), ettei saapuva kirjain näy
     rivin alla ennen kuin se on paikallaan. */
  clip-path:inset(.1em 0 .19em 0);
  padding:.12em .3em 0; margin:-.12em -.3em 0; }
.made__vs{ grid-area:1 / 1; white-space:nowrap; }
/* Askelleveys: vino kirjain tarvitsee tilaa liikkuvan laatikkonsa sivuilla. */
.made__k{ display:inline-block; padding-inline:.12em; margin-inline:-.12em; }
.made__sisus .hi__teksti{ position:absolute; z-index:3; max-width:30ch; color:var(--musta); overflow:hidden;
  font-size:clamp(11px,.8vw,13px); margin:0; }
.made__sisus .hi__teksti > span{ display:block; }
/* Tekstit parina otsikon alla keskiakselin molemmin puolin, luettavan
   kokoisina (Iines 23.10.2026: "tekstit huonot"). Vasen tasataan oikealle,
   oikea vasemmalle, ja väliin jää ohut pystyviiva. */
.made__sisus .hi__teksti{ max-width:min(34ch, 40vw); line-height:1.55; font-size:clamp(13px,1vw,16px); }
.made__sisus .hi__teksti--v{ right:calc(50% + clamp(18px,2vw,36px)); bottom:clamp(40px,11vh,120px); text-align:right; }
.made__sisus .hi__teksti--o{ left:calc(50% + clamp(18px,2vw,36px)); bottom:clamp(40px,11vh,120px); text-align:left; }
.made__sisus::after{ content:''; position:absolute; left:50%; bottom:clamp(40px,11vh,120px); width:1px; height:clamp(60px,7vw,96px);
  background:currentColor; opacity:.35; z-index:3; }

/* ============================================================
   4. REFERENSSIT
   ============================================================ */
.refet{ position:relative; }
/* Rolodex alkaa HI-osion tyhjän alaosan päältä, ei sen jälkeen (20.10.: iso rako). */
.refet--rolo{ margin-top:-22vh; z-index:1; }
.refet__yla{ display:flex; justify-content:space-between; padding-inline:var(--reuna); }

/* ROLODEX (Jenna 19.10.2026, tunne Brandstein 2.0:n "Born out of shared
   passion" -rummusta ja iPhonen herätyskellon valitsimesta). Lava on ruudun
   korkuinen ja kiinnitetään vierityksen ajaksi (brandstein.js).
   KORTIT PYSTYSSÄ kuten oikeassa rolodexissa (Jenna: "ei sylinterin
   ympärille käännettyjä", esikuva sketchfab rolodex): jokainen kortti
   seisoo alareunastaan vaakasuoran akselin varassa ja kääntyy sen ympäri.
   Ohitetut kortit kaatuvat eteen ja jäävät näkyviin alle, tulevat
   nojaavat taakse valitun suojassa. Jenna 19.10.: aloitustilassa näkyy
   vain yksi kortti eikä sen alla mitään (ei nostoa, ei akselitankoa).
   Edellinen versio on tallessa tagissa etusivu-refet-kurkistus. */
.rolo__lava{
  position:relative; height:100vh; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr; padding-top:clamp(84px,9vw,130px);
}
/* Alapino ei saa katketa suoraan reunaan, kun osio vierii pois (Jenna
   19.10.): lavan alaosa häivytetään. Maski on lavalla, joka on 3D-tilan
   ulkopuolella (.rolo aloittaa sen), joten se ei litistä kortteja. */
.rolo__lava{
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 97%);
          mask-image:linear-gradient(to bottom, #000 72%, transparent 97%);
}
/* Kamera ylhäällä (Jennan kuva 19.10.: "takaosakin näkyy"): takana
   nojaavien korttien yläreunat näkyvät porrastettuna viuhkana, ja eteen
   kaatuneet näkyvät pinona alla. */
.rolo{ position:relative; perspective:2400px; perspective-origin:50% -160%; }
.rolo__akseli{ position:absolute; inset:0; transform-style:preserve-3d; }
.rolo__kortti{
  /* Jenna 19.10.: "paljon isompi koko homma"; alle taittuvan kortin ei
     tarvitse näkyä kokonaan, joten pino saa leikkautua lavan reunaan. */
  --kl:min(66vw, 980px, 88vh);               /* kortin leveys */
  --nosto:calc(var(--kl) * .11);              /* nimen mittakaava */
  --kr:clamp(14px,1.6vw,26px);                /* kulmat */
  --varjo:0;                                  /* 0 = edessä, 1 = sivussa (JS) */
  --nousu:0;                                  /* valinnan aste 0..1 (JS) */
  /* Akseli on kortin alareunassa, 70 % lavan korkeudesta. */
  position:absolute; left:50%; top:76%; width:var(--kl); height:calc(var(--kl) * .62);
  display:block; color:var(--kerma); text-decoration:none;
  transform-origin:50% 100%; transform-style:preserve-3d;
  border-radius:var(--kr);
  will-change:transform;
}
/* KAKSI PUOLTA: eteen kaatuessa ylös kääntyy kortin selkä. Etupuolella
   kuva ja nimi, takana yksivärinen pohja ja Brandsteinin sanamerkki
   leimana (Jenna 19.10.). overflow:hidden on pinnoilla eikä kortilla,
   koska se litistäisi kortin 3D-tilan. */
.rolo__etu, .rolo__taka{
  position:absolute; inset:0; border-radius:var(--kr); overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.rolo__etu{ background:var(--harmaa); }
.rolo__taka{ display:none; }   /* selkä ei näy: ohitetut kortit poistuvat (20.10.) */
.rolo__taka::after{
  content:''; position:absolute; inset:0; background:var(--musta); opacity:calc(var(--varjo) * .35);
}
.rolo__etu img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
/* sivussa olevien korttien varjo (valitulla 0) */
.rolo__etu::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--musta); opacity:calc(var(--varjo) * .7);
}
/* Jenna 19.10.: pelkkä kuva, ei tummennusta, tekstejä eikä varjoja; selkä
   tyhjä toistaiseksi. HOVER: valittu kortti pomppaa ylös ja kasvaa, mikä
   kertoo että sitä voi klikata. Muutos on etupinnalla, koska kortin oma
   transform on rullan (JS). */
.rolo__etu{ transition:translate 520ms cubic-bezier(.34,1.56,.64,1), scale 520ms cubic-bezier(.34,1.56,.64,1); }
.rolo__kortti.valittu:hover .rolo__etu, .rolo__kortti.valittu:focus-visible .rolo__etu{
  translate:0 calc(var(--kl) * -.03); scale:1.04;
}
.rolo__kortti:focus-visible{ outline:3px solid var(--puna); outline-offset:4px; }
.rolo__nro-nyt{ display:inline-block; min-width:2ch; }

/* Lähtökortti klikatessa (brandstein.js): kloonattu kortti laajenee ruudun
   kokoiseksi ja jatkuu referenssisivulla kansikuvana (siirtyma.js). */
.rolo-lahto{ position:fixed; z-index:1000; overflow:hidden; pointer-events:none; background:var(--harmaa); color:var(--kerma); }
.rolo-lahto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:700px){
  .rolo__kortti{ --kl:92vw; --nosto:calc(var(--kl) * .14); top:64%; }
}
/* Vähemmän liikettä: ei rullaa, kortit allekkain. */
@media (prefers-reduced-motion:reduce){
  .rolo__lava{ height:auto; overflow:visible; }
  .rolo{ perspective:none; }
  .rolo__akseli{ position:static; display:grid; gap:24px; justify-items:center; padding:24px var(--reuna) 60px; }
  .rolo__kortti{ position:relative; left:auto; top:auto; transform:none !important; }
}

/* 4b. REFERENSSIT, KURKISTUS — vaihtoehto rolodexille (Jenna 21.10.2026).
   Sama kuin tagissa etusivu-refet-kurkistus, luokat refet__* -> refkurk__*. */
.refkurk{ position:relative; padding:clamp(56px,8vw,130px) 0; overflow:clip; }
.refkurk__yla{ display:flex; justify-content:space-between; padding-inline:var(--reuna); }
.refkurk__kentta{ position:relative; margin-top:clamp(28px,5vw,70px); }

/* NIMET
   Kaikki samaa fonttikokoa, joka johdetaan PISIMMÄSTÄ nimestä: se
   täyttää ruudun leveyden, muut jäävät lyhyemmiksi. JS laskee koon,
   ks. sovitaRefet. Rivit ovat kiinni toisissaan pystysuunnassa. */
.refkurk__nimet{ text-align:center; position:relative; z-index:1; font-size:14vw; }
.refkurk__n{
  font-family:var(--f-otsikko); font-weight:400; color:var(--puna); text-transform:uppercase;
  font-size:inherit;           /* ryhmän yhteinen koko, JS asettaa listalle */
  line-height:.80; letter-spacing:-.015em; white-space:nowrap;
}

.refkurk__n a{ color:inherit; text-decoration:none; transition:color 200ms ease;
  /* Safari piirtää värinvaihdossa uudelleen vain laatikon: Ä:n pisteet (rivin
     yläpuolella, line-height .8) ja vinon viimeisen kirjaimen yli menevä osa
     jäivät mustiksi (Iines 22.10.2026). Laatikko kattaa nyt koko musteen. */
  display:inline-block; padding:.3em .3em .04em; margin:-.3em -.3em -.04em; }
/* Jenna 21.10.2026: nimi tummuu hiiren alla. Lyhyt ease, ei expo-käyrää:
   expo.out tekee värinvaihdon käytännössä heti. */
.refkurk__n a:hover{ color:var(--musta); }
.refkurk__k{ display:inline-block; will-change:transform; padding:.3em .3em 0; margin:-.3em -.3em 0; }   /* Safari: tilaa pisteille ja vinolle reunalle */
.refkurk__n a:focus-visible{ outline:2px solid var(--musta); outline-offset:.04em; }

/* KURKISTUS SIVULLA (Iines 22.10.2026; ennen iso kortti ruudun alareunasta).
   Nimen päällä pieni kortti paljastuu nimen vieressä: parilliset (0, 2, 4)
   vasemmalla, parittomat oikealla. Ei pitkää liukua ruudun ulkopuolelta
   ("korttien tulo sivuilta ei näytä hyvältä"): kortti avautuu clip-pathilla
   omalta reunaltaan ja siirtyy vain 24 px, kuva asettuu suurennoksesta.
   Hiiren lähtiessä se sulkeutuu samaan reunaan. Klikattuna kortti kasvaa
   ruudun kokoiseksi ja jatkuu referenssisivun kansikuvana (siirtyma.js).
   Liike talon sopimuksen mukaan: sisään expo.out 800 ms, ulos power2.in
   ~65 % siitä. */
.refkurk__kurkut{ position:fixed; inset:0; z-index:50; pointer-events:none; }
.refkurk__kurkku{
  --g:clamp(6px,.6vw,10px);
  --lev:clamp(210px,20vw,380px);
  --nosto:calc(var(--lev) * .2);        /* nimen mittakaava kortissa (myös siirtyma.css) */
  --r:clamp(14px,1.6vw,26px);
  --kiinni:inset(0 100% 0 0 round var(--r));
  position:absolute; top:var(--y,50%); left:var(--reuna);
  width:var(--lev); height:calc(var(--lev) * .75); border-radius:var(--r);
  overflow:hidden; background:var(--harmaa); display:block; pointer-events:auto;
  translate:-24px -50%; rotate:-2deg; visibility:hidden; clip-path:var(--kiinni);
  transition:clip-path 520ms cubic-bezier(.55,0,1,.45), translate 520ms cubic-bezier(.55,0,1,.45), visibility 0s 520ms;
}
.refkurk__kurkku:nth-child(even){ left:auto; right:var(--reuna); translate:24px -50%; rotate:2deg; --kiinni:inset(0 0 0 100% round var(--r)); }
.refkurk__kurkku.auki{
  translate:0 -50%; visibility:visible; clip-path:inset(0 0 0 0 round var(--r));
  transition:clip-path 800ms cubic-bezier(.16,1,.3,1), translate 800ms cubic-bezier(.16,1,.3,1),
             rotate 800ms cubic-bezier(.16,1,.3,1), visibility 0s;
}
.refkurk__kurkku.auki:hover{ rotate:0deg; }
/* Klikattu kortti kasvaa ruudun kokoiseksi (sama kehys kuin saapumiskortissa). */
.refkurk__kurkku.avautuu, .refkurk__kurkku.avautuu:hover{
  top:var(--g); left:var(--g); right:auto; width:calc(100vw - var(--g) * 2); height:calc(100vh - var(--g));
  border-radius:clamp(22px,3.4vw,56px); translate:0 0; rotate:0deg; visibility:visible; clip-path:none;
  transition:top 760ms cubic-bezier(.16,1,.3,1), left 760ms cubic-bezier(.16,1,.3,1), width 760ms cubic-bezier(.16,1,.3,1),
             height 760ms cubic-bezier(.16,1,.3,1), translate 760ms cubic-bezier(.16,1,.3,1), rotate 760ms cubic-bezier(.16,1,.3,1),
             border-radius 760ms cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* Kuva asettuu kevyestä suurennoksesta noustessaan. */
.refkurk__kurkku img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block;
  scale:1.08; transition:scale 1200ms cubic-bezier(.16,1,.3,1);
}
.refkurk__kurkku.auki img, .refkurk__kurkku.avautuu img{ scale:1; }
/* NIMI KUVAN PÄÄLLÄ (vrt. herocollective.co). Kuva tummenee kaistaleen
   kohdalta, jotta kerma erottuu. Nimen mitat (nosto * .62, yläreuna
   nosto * .2) on kopioitu saapumiskorttiin (siirtyma.css), jotta nimi
   jatkuu referenssisivulla samassa kohdassa. */
.refkurk__kurkku::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(25,25,25,.62), rgba(25,25,25,.28) calc(var(--nosto) * 1.2), rgba(25,25,25,0) calc(var(--nosto) * 2.4));
}
.refkurk__kurkku-nimi{
  position:absolute; z-index:2; left:clamp(18px,2.2vw,40px);
  font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; white-space:nowrap;
  font-size:calc(var(--nosto) * .62); line-height:.8; letter-spacing:-.015em; color:var(--kerma);
  /* Maski. Isoilla kirjaimilla ja rivivälillä .8 Ä:n pisteet ovat rivin
     yläpuolella, ja .06em ylätila leikkasi ne (kuvattu 15.10.). Ylätila
     .22em ja laatikko .16em ylemmäs: teksti on yhä kohdassa
     nosto * .2 + .06em, kuten saapumiskortissa (siirtyma.css). */
  overflow:hidden; padding-top:.22em; top:calc(var(--nosto) * .2 - .16em);
}
/* Nimi nousee oman rivinsä maskin takaa (talon liikesopimus), meta-rivi
   perässä. Laskiessa ne eivät animoidu: kortti vie ne mukanaan. */
.refkurk__kurkku-nimi > span{ display:block; translate:0 105%; }
.refkurk__kurkku-meta{
  position:absolute; z-index:2; left:clamp(18px,2.2vw,40px); right:clamp(18px,2.2vw,40px);
  top:calc(var(--nosto) * .78); display:flex; justify-content:space-between; gap:2em;
  font-family:var(--f-mono); font-size:clamp(10px,.78vw,13px); letter-spacing:.08em; text-transform:uppercase;
  color:var(--kerma); opacity:0; translate:0 8px;
}
.refkurk__kurkku.auki .refkurk__kurkku-nimi > span{
  translate:0 0; transition:translate 900ms cubic-bezier(.16,1,.3,1) 120ms;
}
.refkurk__kurkku.auki .refkurk__kurkku-meta{
  opacity:1; translate:0 0;
  transition:opacity 600ms cubic-bezier(.16,1,.3,1) 260ms, translate 800ms cubic-bezier(.16,1,.3,1) 260ms;
}
/* Kortissa vain kuva, ei tekstejä eikä tummennusta (Iines 22.10.2026). */
.refkurk__kurkku::before, .refkurk__kurkku-nimi, .refkurk__kurkku-meta{ display:none; }
.refkurk__kurkku.avautuu .refkurk__kurkku-nimi > span{ translate:0 0; }
.refkurk__kurkku.avautuu .refkurk__kurkku-meta{ opacity:0; transition:opacity 300ms; }
.refkurk__kurkku .kuvapaikka{ display:block; width:100%; height:100%; }
.refkurk__kurkku .kuvapaikka svg{ display:none; }   /* nimi kertoo, mikä tämä on */
/* Kosketusnäytöllä ei hoveria: nimet ovat suoria linkkejä. */
@media (hover:none){ .refkurk__kurkut{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .refkurk__kurkku, .refkurk__kurkku.auki, .refkurk__kurkku img,
  .refkurk__kurkku-nimi > span, .refkurk__kurkku-meta{ transition:none !important; }
}

/* ============================================================
   4. TYÖNÄYTTEET — moblinks.fr:n kokoelmakorttien rakenne (Iines 22.10.2026)
   Kortit ovat ruudun kokoisia ja tarttuvat yläreunaan (sticky); seuraava
   liukuu edellisen päälle tavallisella vierityksellä. Rajaus (clip-path
   inset, pyöristys = inset leveyden mukaan) ja kuvan liuku tulevat
   JS:stä joka ruudulla vierityksen mukaan. Tarrat omana kerroksenaan.
   Tausta toimistokuva, sumea ja hyvin tumma (--musta).
   ============================================================ */
.tyot{ position:relative; z-index:2; background:var(--musta); color:var(--kerma); }   /* suora vaihto, ei siirtymäanimaatiota (Iines 22.10.2026) */
.tyot__tausta{ position:absolute; inset:0; overflow:clip; }
/* REVITTY PAPERI: vaalean sivun alareuna on revitty, alta paljastuu tumma osio.
   JS nostaa sitä hitaammin kuin vieritys (parallaksi). Taustakuvan yläosa
   tummuu mustaan, jotta harju ja kuva yhtyvät saumatta. */
.tyot__vuoret{ position:absolute; z-index:2; left:0; right:0; top:-1px; height:clamp(36px,5vw,90px); pointer-events:none; }
.vuori{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; will-change:transform;
  overflow:visible; }   /* ei CSS-varjosuodinta: se rajautui laatikkoon ja piirsi viivan */
.repeama__varjo{ fill:#000; opacity:.18; }
/* Revitty vaalea sivu: kerma paperi ylhäällä, sen repeämässä valkoinen kuitu. */
.repeama__paperi{ fill:var(--kerma); }
.repeama__kuitu{ fill:#fdfcf8; }
.tyot__tausta::before{ content:''; position:absolute; left:0; right:0; top:0; height:40vh; z-index:1;
  background:linear-gradient(var(--musta), rgba(25,25,25,0)); pointer-events:none; }
/* Valmiiksi sumennettu kuva (ei CSS-blur-suodinta: sen laskeminen joka
   vierityskehyksellä teki osiosta hitaan). Tummuus tulee peitteestä, jonka
   läpinäkyvyys muuttuu siirtymässä (kevyt, näytönohjain hoitaa). */
.tyot__tausta img{ position:sticky; top:0; width:100%; height:100vh; object-fit:cover; scale:1.12; will-change:transform; }
.tyot__varjo{ position:absolute; inset:0; background:#000; opacity:.9; }   /* melkein musta (Iines 22.10.2026) */
/* Tumman osion kohdalla ylänurkan leima vaaleana (brandstein.js: body.tyot-alla). */
body.tyot-alla .leima-oikea{ color:var(--kerma); }
/* Otsikko kiinnitetyn alueen yläosassa (Jenna 23.10.2026): pieni "Tätä me
   teemme" ja iso Sunter-otsikko. */
.tyot__yla{ position:relative; z-index:1; padding:0 var(--reuna) clamp(22px,2.6vw,48px); }
.tyot__otsikko{ margin:.25em 0 0; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase;
  font-size:clamp(44px,6.4vw,124px); line-height:.9; letter-spacing:-.005em; color:var(--musta); }
/* VAAKAVIERITYS (Jenna 22.10.2026, brandstein.js): kiinnitetty kaista,
   jossa kuvarata liukuu vasemmalle. Nimi vuorotellen kuvan ylä- ja
   alapuolella; kummallakin kohteella on molemmat rivit, jotta kuvat
   pysyvät samalla linjalla. Edellinen versio: tagi etusivu-tyot-moblinks. */
.tyot__vaaka{ position:relative; z-index:1; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.tyot__rata{
  list-style:none; margin:0; display:flex; align-items:flex-start; gap:clamp(20px,2vw,40px);
  padding:0 var(--reuna); will-change:transform;
}
.tyot__tyo{ flex:none; }
/* KORTIT (Jenna 23.10.2026, esikuva two26.studio): samankokoiset
   pyöreäkulmaiset kuvat, alla nimi, palvelut ja nuolipallo. */
.tyot__linkki{
  /* Leveys myös ruudun korkeuden mukaan: otsikko, kuva ja tekstit mahtuvat
     kiinnitettyyn ruutuun matalallakin näytöllä. */
  display:block; width:max(280px, min(76vw, 1400px, calc((100svh - 330px) * 16 / 9))); color:var(--kerma); text-decoration:none;
}
/* 16:9 (Jenna 23.10.2026): kaikki kuvat 1920 x 1080 -kuvia referenssien
   kansioista, joten mitään ei rajata. Isot kortit: kerrallaan näkyy yksi
   kokonaisena. Oulu in Moviesin kuvat ovat 16:10, niistä rajautuu hieman.
   --tayte = kortin täyttöväri (etusivu-tyot.js). */
.tyot__kuvakehys{ display:block; position:relative; overflow:hidden; aspect-ratio:16 / 9;
  border-radius:clamp(12px,1.1vw,20px); isolation:isolate; }
.tyot__kuva{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.tyot__kuva--toinen{ visibility:hidden; }
.tyot__linkki.toinen .tyot__kuva{ visibility:hidden; }
.tyot__linkki.toinen .tyot__kuva--toinen{ visibility:visible; }
/* Punainen tussiveto (etusivu-tyot.js), sama kuin sivusiirtymässä. */
.tyot__veto{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.tyot__veto path{ fill:none; stroke:var(--tayte, var(--puna)); stroke-linecap:round; stroke-linejoin:round; }
.tyot__veto rect{ fill:var(--tayte, var(--puna)); opacity:0; }
.tyot__ala{
  display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:center;
  padding-top:clamp(14px,1.3vw,22px);
}
.tyot__nimi{
  grid-column:1; font-family:var(--f-otsikko); text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(24px,2.2vw,40px); line-height:1.05; white-space:nowrap;
}
.tyot__tagit{
  grid-column:1; margin-top:.45em; font-family:var(--f-mono); text-transform:uppercase;
  font-size:clamp(10px,.75vw,13px); letter-spacing:.06em; color:var(--puna);
}
.tyot__nuoli{
  grid-column:2; grid-row:1 / span 2; display:grid; place-items:center;
  width:clamp(40px,3vw,54px); aspect-ratio:1; border-radius:50%; background:var(--puna); color:var(--kerma);
  transition:transform 400ms cubic-bezier(.16,1,.3,1);
}
.tyot__nuoli svg{ width:46%; height:46%; }
.tyot__linkki:hover .tyot__nuoli, .tyot__linkki:focus-visible .tyot__nuoli{ transform:rotate(45deg); }
.tyot__linkki:focus-visible{ outline:2px solid var(--puna); outline-offset:6px; border-radius:clamp(12px,1.1vw,20px); }
/* Puhelimella ei kiinnitystä: rata pyyhkäistään sivuttain. */
@media (max-width:860px) and (pointer:coarse){
  /* Vain korttirata vierii sivuttain; otsikko pysyy paikallaan. */
  .tyot__vaaka{ height:auto; overflow:visible; padding:10vh 0 14vh; }
  .tyot__rata{ gap:16px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tyot__rata::-webkit-scrollbar{ display:none; }
  .tyot__linkki{ width:88vw; }
  .tyot__nimi{ font-size:clamp(22px,6.6vw,32px); }
  .tyot__tagit{ font-size:10px; }
}

/* ============================================================
   5. ABOUT
   ============================================================ */
/* Uusi asettelu (Iines 22.10.2026: "about us osio on huono"): kaksi palstaa
   yhdelle ruudulle. Vasemmalla iso vaakasuora About us ja teksti,
   oikealla Tieto–taito–intuitio-kuvio koko korkeudelta. */
.about{ padding:clamp(56px,8vw,130px) var(--reuna); }
.about__yla{ display:flex; justify-content:space-between; margin-bottom:clamp(20px,3vw,44px); }
.about__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:clamp(24px,5vw,100px); align-items:center; min-height:min(78vh, 900px);
}
/* Lähemmäs sivun keskikohtaa (Jenna 23.10.2026): tekstilohko sarakkeen
   oikeaan reunaan, teksti yhä vasemmalle tasattuna. */
.about__vasen{ display:grid; gap:clamp(22px,3vw,48px); align-content:center; justify-self:end; }
.about__otsikko{ margin:0; font-family:var(--f-nimi); font-weight:400; color:var(--puna); text-transform:uppercase;
  font-size:clamp(4.5rem,16vw,16rem); line-height:.8; letter-spacing:-.01em; }
.about__sana{ display:block; white-space:nowrap; }
/* Kirjaimet nousevat rivinsä maskin takaa ja hiiren kohdalla (brandstein.js).
   Maskissa tilaa vinolle viimeiselle kirjaimelle ja nousulle. */
.about__sana.ab-maski{ overflow:clip; overflow-clip-margin:.04em; padding:.08em .3em 0; margin:-.08em -.3em 0; }
.ab-k{ display:inline-block; transform-origin:50% 100%; will-change:transform; }
.about__teksti{
  max-width:44ch; display:grid; gap:.9em;
  font-size:clamp(14px,1.1vw,18px); line-height:1.6;
}
.about__teksti p{ margin:0; }
/* TIETO, TAITO JA INTUITIO (Iines 22.10.2026): kuvan paikalla iso kuvio.
   Ympyrät ovat ohuita mustia viivoja, sanat käsialaa, plektra punainen.
   Piirtyminen ja plektran isku: brandstein.js. */
.about__ksi{ margin:0; display:grid; place-items:center; }
.ksi{ width:min(100%, 78vh, 860px); height:auto; overflow:visible; }
.ksi__ympyra{ fill:none; stroke:var(--musta); stroke-width:2; }
.ksi__sana{ font-family:var(--f-eyebrow); font-size:60px; fill:var(--puna); }
.ksi__tussi{ fill:none; stroke:var(--puna); stroke-width:24; stroke-linecap:round; stroke-linejoin:round;
  opacity:.95; }
/* Punaisen tussialueen keskelle vain kermainen B, ei plektraa (Iines 23.10.2026). */
.ksi__plektra-pohja{ fill:var(--puna); opacity:0; }   /* näkyviin sykkeen alkaessa (Jenna 23.10.2026) */
.ksi__plektra-b{ fill:var(--kerma); }

/* ============================================================
   5b. INSTAGRAM — About usin jälkeen (Jenna 8.10.2026)
   Kuusi ruutua: työpöydällä yksi rivi, puhelimessa 2 x 3.
   ============================================================ */
.ig{ padding:0 var(--reuna) clamp(56px,8vw,130px); }
.ig[hidden]{ display:none; }
.ig__yla{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(10px,1.4vw,20px); }
.ig__tili{ transition:color 200ms; }
.ig__tili:hover, .ig__tili:focus-visible{ color:var(--puna); }
.ig__otsikko{
  font-family:var(--f-otsikko); font-weight:400; color:var(--puna); text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,7rem); line-height:.9; margin-bottom:clamp(18px,2.4vw,36px);
}
.ig__ruudukko{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(8px,1vw,16px); }
.ig-ruutu{ display:block; position:relative; color:inherit; }
.ig-ruutu__kuva{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--kerma-2); }
.ig-ruutu__kuva img, .ig-ruutu__kuva video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:scale 700ms var(--e);
}
.ig-ruutu:hover .ig-ruutu__kuva img, .ig-ruutu:hover .ig-ruutu__kuva video{ scale:1.04; }
.ig-ruutu__merkki{
  position:absolute; top:8px; right:8px; z-index:1; font-size:12px; line-height:1;
  color:var(--kerma); text-shadow:0 0 4px rgba(25,25,25,.5);
}
.ig-ruutu__teksti{
  margin-top:.7em; font-size:clamp(11px,.8vw,13px); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:860px){ .ig__ruudukko{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   6. FOOTER — punainen pyyhkäisy alhaalta, kursori paljastaa kuvan
   ============================================================ */
.footer{
  /* Ei koko ruudun korkuinen (Iines 21.10.2026: "liian korkea"). */
  position:relative; min-height:min(64dvh, 720px); overflow:hidden;
  display:grid; grid-template-rows:1fr auto; background:var(--puna); color:var(--kerma);
}
/* Kursorin reiästä paljastuva kuva ja punainen nestekerros (brandstein.js).
   Tasainen punainen koko korkeudelta (Iines 21.10.2026): kermasta punaiseen
   kulkeva liukuväri näytti sameelta ruskealta. */
.footer__kuva{ position:absolute; inset:0; background:var(--musta); z-index:1; }
.footer__kuva img{ width:100%; height:100%; object-fit:cover; object-position:60% 40%; }   /* neonkyltti, normaalit värit (Iines 23.10.2026) */
.footer__neste{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }

/* SARAKKEET: Sivut, Yhteys, Seuraa ja pieni tekijänoikeusrivi. */
.footer__sisalto{
  position:relative; z-index:3; align-self:end; display:grid; grid-template-columns:repeat(3, minmax(0,auto)) 1fr;
  gap:clamp(24px,4vw,80px); align-items:end;
  /* Jättinimen muste nousee rivinsä yli: tilaa alle. */
  padding:clamp(20px,3vw,40px) var(--reuna) clamp(36px,5.5vw,96px);
  border-top:1px solid rgba(228,222,208,.35); margin-inline:var(--reuna); padding-inline:0;
}
.footer__sarake{ display:grid; gap:.7em; align-content:start; align-self:start; }
.footer__ots{ margin:0; font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.footer__lista{ display:grid; gap:.25em; margin:0; padding:0; list-style:none; }
.footer__lista a, .footer__teksti{ font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(14px,1.15vw,19px); line-height:1.35; margin:0; }
.footer__lista a, .footer__teksti a{ background:linear-gradient(currentColor,currentColor) left 100% / 0 1px no-repeat;
  transition:background-size 500ms cubic-bezier(.16,1,.3,1); }
.footer__lista a:hover, .footer__teksti a:hover,
.footer__lista a:focus-visible, .footer__teksti a:focus-visible{ background-size:100% 1px; }
.footer__pieni{ margin:0; justify-self:end; align-self:end; font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px);
  letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.footer__nimi{ font-family:var(--f-nimi); position:relative; z-index:3; color:var(--kerma); padding-bottom:.02em; }

/* ============================================================
   VALIKKO — kortti vasemmasta reunasta (Jenna 8.10.2026).
   Esikuva herocollective.co, kuvattu 8.10.: pyöreäkulmainen vaalea
   kortti 8 px irti ruudun reunoista, noin puolet leveydestä,
   linkit 10.6 vw kapeaa versaalia ilman numeroita tai viivoja.
   Siellä kortti kasvaa napin kulmasta; täällä se avautuu
   vasemmasta reunasta clip-pathilla — muoto pysyy, vain näkyvä osa
   kasvaa, joten tekstit eivät veny.
   ============================================================ */
.vari{
  position:fixed; inset:0; z-index:80; background:rgba(25,25,25,.45);
  opacity:0; visibility:hidden;
  transition:opacity 420ms linear, visibility 0s linear 420ms;
}
.valikko{
  --pyor:clamp(14px,1.6vw,26px);
  position:fixed; z-index:81; left:8px; top:8px; bottom:8px;
  width:min(calc(100vw - 16px), max(520px, 50vw));
  /* margin:auto keskittää listan, mutta toisin kuin justify-content:center
     ei työnnä ylintä riviä kortin yli, jos lista ei mahdu. */
  display:flex; flex-direction:column; overflow:auto;
  scrollbar-width:none;   /* vieritys säilyy pienillä ruuduilla, palkki ei näy */
  background:var(--kerma); color:var(--musta); border-radius:var(--pyor);
  padding:clamp(28px,5vh,64px) clamp(20px,2.6vw,44px);
  visibility:hidden;
  clip-path:inset(0 100% 0 0 round var(--pyor));
  transition:clip-path 640ms cubic-bezier(.5,0,.75,0), visibility 0s linear 640ms;
}
.valikko::-webkit-scrollbar{ display:none; }
.valikko ul{ margin-block:auto; }
body[data-valikko] .vari{ opacity:1; visibility:visible; transition-delay:0s; }
body[data-valikko] .valikko{
  visibility:visible; clip-path:inset(0 0 0 0 round var(--pyor));
  transition:clip-path 900ms cubic-bezier(.32,.72,0,1), visibility 0s;
}

/* Koko riviltä: seitsemän riviä mahtuu korttiin korkeussuunnassakin. */
.valikko li{
  /* 12.4 dvh ylitti kortin 9–13 px kaikilla työpöytäkoilla, ja selain
     näytti vierityspalkin (Jenna 19.10.: "ruma scrollbar"). */
  font-size:min(10.6vw, 11.8dvh, 9.5rem);
  /* Paljastus vaatii overflow:hidden. Versaali-Ä:n pisteet nousevat
     0.84 em perusviivasta, joten ikkunaa kasvatetaan ylöspäin ja
     kumotaan negatiivisella marginaalilla: asettelu ei muutu. */
  overflow:hidden; padding:.3em .3em 0; margin:-.3em -.3em 0;   /* pisteet ja vinot reunat (Iines 21.–23.10.2026) */
}
/* line-height myös linkille: muuten rivin korkeus tulee bodyn 1.65:stä
   ja rivien väliin jää lähes kokonainen tyhjä rivi. */
.valikko ul{ line-height:.92; }
/* padding-right: vinon fontin viimeinen kirjain ulottuu askelleveytensä yli, ja Safari
   rajaa liikkuvan (translate) linkin kerroksen laatikon kokoiseksi -> kirjain poikki
   (Iines 21.10.2026). Negatiivinen marginaali pitää asettelun ennallaan. */
.valikko__l{ display:block; width:max-content; max-width:100%; line-height:.92; transition:color 200ms;
}
.valikko:focus{ outline:none; }
.valikko__nimi{
  font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase;
  font-size:1em; line-height:.92; white-space:nowrap;
}
.valikko__l:hover, .valikko__l:focus-visible{ color:var(--puna); }
/* Hover: nuoli piirtyy (viiva ensin, sitten kärki) ja nimi väistää sen tieltä.
   padding-right antaa siirtyneelle nimelle tilaa (Safari rajaa kerroksen). */
.valikko__l{ position:relative; padding-right:1em; margin-right:-1em; padding-top:.3em; margin-top:-.3em; }
.valikko__nimi{ display:inline-block; transition:translate 600ms cubic-bezier(.16,1,.3,1);
  padding:.3em .3em 0; margin:-.3em -.3em 0; }   /* Safari rajaa liikkuvan kerroksen: tilaa pisteille */
.valikko__nuoli{ position:absolute; left:0; top:calc(50% + .15em); width:.62em; height:auto; translate:0 -55%;
  fill:none; stroke:var(--puna); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
/* Pyöreä pää jäi näkyviin punaisena pisteenä, vaikka viiva oli piirtämättä
   (Jenna 21.10.2026): piilossa, kunnes piirto alkaa, ja vasta vetäytymisen jälkeen pois. */
/* Poistuessa nuoli häviää nopeasti (140 ms) ja nimi palaa vasta sen perään,
   ettei nimi liu'u vielä näkyvän nuolen päälle (Iines 23.10.2026). */
.valikko__nuoli path{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset 140ms cubic-bezier(.2,0,.4,1), opacity 0s 140ms; }
.valikko__l:not(:hover):not(:focus-visible) .valikko__nimi{ transition:translate 380ms cubic-bezier(.55,0,.45,1) 90ms; }
.valikko__l:hover .valikko__nimi, .valikko__l:focus-visible .valikko__nimi, .valikko__l.napautettu .valikko__nimi{ translate:.78em 0; }
.valikko__l:hover .valikko__nuoli path, .valikko__l:focus-visible .valikko__nuoli path, .valikko__l.napautettu .valikko__nuoli path{
  stroke-dashoffset:0; opacity:1; transition:stroke-dashoffset 520ms cubic-bezier(.16,1,.3,1) 80ms, opacity 0s 80ms; }
.valikko__l:hover .valikko__nuoli path + path, .valikko__l:focus-visible .valikko__nuoli path + path, .valikko__l.napautettu .valikko__nuoli path + path{ transition-delay:300ms; }
/* Kosketusnäytöllä nuoli piirtyy napautuksesta kuten hoverissa (Jenna 26.10.2026:
   teksti siirtyi oikealle, mutta nuolta ei tullut, koska se oli piilotettu). */
.valikko__l.nyt{ color:var(--puna); }

.valikko li > a{ translate:0 105%; transition:translate 760ms cubic-bezier(.16,1,.3,1), color 200ms; }
body[data-valikko] .valikko li > a{ translate:0 0; }
.valikko li:nth-child(1)>a{transition-delay:180ms,0s}.valikko li:nth-child(2)>a{transition-delay:235ms,0s}
.valikko li:nth-child(3)>a{transition-delay:290ms,0s}.valikko li:nth-child(4)>a{transition-delay:345ms,0s}
.valikko li:nth-child(5)>a{transition-delay:400ms,0s}.valikko li:nth-child(6)>a{transition-delay:455ms,0s}
.valikko li:nth-child(7)>a{transition-delay:510ms,0s}
body:not([data-valikko]) .valikko li>a{ transition-delay:0ms; transition-duration:300ms; }

.valikko__sulje{
  position:absolute; right:clamp(12px,1.4vw,22px); top:clamp(12px,1.4vw,22px);
  /* KÄSIN PIIRRETTY X (Jenna 19.10.2026): kaksi siveltimellä piirrettyä
     framea (assets/img/tussi/x-1/2.webp, alfamaskit), jotka vuorottelevat
     tussielementtien tahdissa (html.tussi-b, brandstein.js). Napin oma
     "X"-kirjain jää ruudunlukijalle ja sivuille ilman CSS:ää; aria-label
     on paikallaan. Väri tulee currentColorista. */
  width:clamp(40px,4vw,68px); aspect-ratio:320/294; padding:0;
  font-size:0; color:var(--musta); transition:color 200ms, rotate 300ms var(--e);
}
.valikko__sulje::before, .valikko__sulje::after{
  content:''; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url('../img/tussi/x-1.webp') center / contain no-repeat;
          mask:url('../img/tussi/x-1.webp') center / contain no-repeat;
}
.valikko__sulje::after{ -webkit-mask-image:url('../img/tussi/x-2.webp'); mask-image:url('../img/tussi/x-2.webp'); opacity:0; }
html.tussi-b .valikko__sulje::before{ opacity:0; }
html.tussi-b .valikko__sulje::after{ opacity:1; }
.valikko__sulje:hover{ color:var(--puna); rotate:90deg; }

/* Puhelimella kortti on koko ruudun levyinen, joten leveydestä johdettu
   10.6 vw jäi 41 px:iin (mitattu 390 px:llä). */
@media (max-width:700px){ .valikko li{ font-size:min(16vw, 8.6dvh); } }

@media (prefers-reduced-motion:reduce){
  .valikko, body[data-valikko] .valikko{ transition:none; }
  .valikko li > a{ translate:0 0; transition:none; }
}

/* kuvapaikat — väliaikaisia, eivät saa jäädä julkaisuun */
.kuvapaikka{ display:grid; place-items:center; width:100%; height:100%;
  background:var(--harmaa); color:rgba(255,255,255,.55); }
.kuvapaikka svg{ width:clamp(20px,12%,40px); }

@media (max-width:860px){
  /* Jättinimen muste nousee riviruutunsa yli, joten kapealla ruudulla
     linkit ja osoite osuivat sen päälle. */
  /* Kapealla sarakkeet kahteen riviin; tekijänoikeus omalle rivilleen. */
  .footer__sisalto{ grid-template-columns:1fr 1fr; padding-bottom:clamp(18px,7vw,48px); }
  .footer__sarake:first-child{ grid-row:span 2; }
  .footer__pieni{ grid-column:1 / -1; justify-self:start; }
  .about__grid{ grid-template-columns:1fr; row-gap:clamp(28px,8vw,56px); min-height:0; }
  .about__vasen{ justify-self:stretch; }
  .about__otsikko{ font-size:clamp(3.4rem,21vw,7.5rem); }
  .ksi{ width:100%; }
  .made__sisus .hi__teksti{ max-width:36ch; font-size:12px; }
  /* Ensimmäinen teksti otsikon yläpuolelle kuten desktopissa, toinen alle
     (Iines 22.10.2026). */
  .made__sisus::after{ display:none; }
  .made__sisus .hi__teksti{ max-width:none; }
  .made__sisus .hi__teksti--v{ top:calc(var(--reuna) + 70px); bottom:auto; left:var(--reuna); right:var(--reuna); text-align:left; }
  .made__sisus .hi__teksti--o{ top:auto; bottom:16%; left:var(--reuna); right:var(--reuna); text-align:left; overflow:visible; }
  /* Kapealla HI-osion alaosassa on teksti: rolodex ei nouse sen päälle (21.10.2026). */
  .refet--rolo{ margin-top:0; }
}

@media (prefers-reduced-motion:reduce){
  .tussi{ display:none; }
}

/* ============================================================
   TUSSIELEMENTIT (Jenna 8.10.2026, assets/tussielementtejä -> img/tussi)
   Jokaisesta kaksi käsin piirrettyä framea, joita vuorotellaan: ele
   "kiehuu" kuin käsin animoitu. Kuvaa käytetään MASKINA, joten väri
   tulee currentColorista eikä tiedostosta.
   Liikkeen sopimus: käsin tehty osa liikkuu ruutuina. Framet vaihtuvat
   180 ms välein (~5.5 fps), ja esiinpiirto etenee kuudessa askeleessa.
   ============================================================ */
.tussi-el{
  position:absolute; z-index:1; pointer-events:none; color:var(--musta);
  /* esiinpiirto: rajaus avautuu --suunta-puolelta askel kerrallaan */
  clip-path:var(--kiinni, inset(0 100% 0 0));
  transition:clip-path 540ms steps(6, end);
}
.tussi-el.nakyy{ clip-path:inset(0 0 0 0); }
.tussi-el::before, .tussi-el::after{
  content:''; position:absolute; inset:0; background:currentColor;
  -webkit-mask:var(--k1) center / 100% 100% no-repeat;
          mask:var(--k1) center / 100% 100% no-repeat;
}
.tussi-el::after{ -webkit-mask-image:var(--k2); mask-image:var(--k2); opacity:0; }
/* FRAMEJEN VAIHTO YHDELLÄ LUOKALLA (15.10.2026). Aiemmin kumpikin frame
   vilkkui omalla CSS-animaatiollaan; jos ne ajautuivat eri tahtiin,
   välissä oli hetki jolloin kumpaakaan ei näkynyt (Jenna: "välkkyy").
   Nyt brandstein.js vaihtaa <html>-luokkaa, ja molemmat framet vaihtuvat
   samassa tyylilaskennassa. */
html.tussi-b .tussi-el::before{ opacity:0; }
html.tussi-b .tussi-el::after{ opacity:1; }

.tussi-el--ympyra     { --k1:url('../img/tussi/br-1-1.webp'); --k2:url('../img/tussi/br-1-2.webp'); }
.tussi-el--soikio     { --k1:url('../img/tussi/br-2-1.webp'); --k2:url('../img/tussi/br-2-2.webp'); }
.tussi-el--alleviivaus{ --k1:url('../img/tussi/br-3-1.webp'); --k2:url('../img/tussi/br-3-2.webp'); }
/* nuoli piirtyy alkupäästään (oikealta ylhäältä) kärkeen */
.tussi-el--nuoli      { --k1:url('../img/tussi/br-4-1.webp'); --k2:url('../img/tussi/br-4-2.webp');
                        --kiinni:inset(0 0 100% 0); }

/* Sijoitukset */
/* Merkinnän takana: soikion veto ei peitä pientä tekstiä. */
.hi__leima{ position:relative; isolation:isolate; }
.hi__leima .tussi-el--soikio{
  left:-16%; width:132%; top:50%; aspect-ratio:900/329; translate:0 -50%; z-index:-1;
}
.ig__tili{ position:relative; isolation:isolate; }
.ig__tili .tussi-el--ympyra{
  left:-18%; width:136%; top:50%; aspect-ratio:900/634; translate:0 -50%; z-index:-1;
  color:var(--puna);
}
/* Otsikon soikio poistettu 23.10.2026 (Jenna: huono). Vain @brandstein
   ympyröidään. */

@media (prefers-reduced-motion:reduce){
  .tussi-el{ clip-path:none; transition:none; }
  .tussi-el::before, .tussi-el::after{ animation:none; }
  .tussi-el::after{ opacity:0; }
}
/* ============================================================
   KÄSIN PIIRRETTY HI (Jenna 15.10.2026)
   Kaksi framea (assets/img/hi/hi-1-alfa.webp, hi-2-alfa.webp) vuorottelevat
   220 ms välein (Jenna 15.10.: "pikkiriikkisen rauhallisempi", tussielementit
   yhä 180 ms): HI "kiehuu" kuin käsin animoitu. Vaihto: brandstein.js.
   Kuvat ovat harmaasävymaskeja (valkoinen = näkyy), joten väri tulee
   --kermasta. 6,7 Mt PNG:t -> 129 + 173 kt.
   Twicker-kirjaimet jäävät näkymättömiksi: morfi mittaa niistä, mihin
   Made with -tekstin H ja I liukuvat, ja kuva sijoitetaan niiden
   musteen päälle (brandstein.js sijoitaHiKuva).
   ============================================================ */
.hi__hi .kirjain{ color:transparent; }
.hi__kuva{
  position:absolute; left:var(--hk-x,0); top:var(--hk-y,0);
  width:var(--hk-w,100%); height:var(--hk-h,100%); pointer-events:none;
}
.hi__kuva::before, .hi__kuva::after{
  /* Tavallinen kuva, kerma valmiiksi poltettuna (Iines 22.10.2026: HI ei
     näkynyt Safarissa maskina). */
  content:''; position:absolute; inset:0;
  background:url('../img/hi/hi-1-kerma.webp') center / contain no-repeat;
}
.hi__kuva::after{
  background-image:url('../img/hi/hi-2-kerma.webp');
  opacity:0;
}
/* vaihto kuten tussielementeissä, oma tahti (brandstein.js) */
html.hi-b .hi__kuva::before{ opacity:0; }
html.hi-b .hi__kuva::after{ opacity:1; }
/* Syvyysotsikot (brandstein.js): sanat koossa, kirjaimet 3D-tilassa. */
.syv-sana{ display:inline-block; white-space:nowrap; }
.syv-k{ display:inline-block; }

/* HERON TULO (brandstein.js, Jenna 21.10.2026): käsiala ja pilleri
   piilossa, kunnes tulo alkaa. Varmistus: näkyviin 4 s:n kohdalla,
   jos skripti ei aja. */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="off"]) .hero__nimi:not(.tullut),
  html.js:not([data-motion="off"]) .hero__alaote:not(.tullut){ opacity:0; animation:hero-varmistus 0s 8s forwards; }
  html.js:not([data-motion="off"]) .palkki__p:not(.tullut){ clip-path:inset(0% 50% 0% 50% round 999px); animation:hero-varmistus-p 0s 8s forwards; }
}
@keyframes hero-varmistus{ to{ opacity:1; } }
/* NIMEN JÄLKI (brandstein.js, Jenna 23.10.2026): kopiot ruutuun
   kiinnitetyllä kerroksella nimen ylä- ja alapuolella. Kehys rajaa
   kaistaleen; kopio on nimen klooni, joten koko ja kirjainväli täsmäävät. */
.nimi-jalki{ position:fixed; inset:0; z-index:5; pointer-events:none; }
.nimi-jalki__k{ position:absolute; overflow:hidden; visibility:hidden; }
.nimi-jalki__n{ position:absolute !important; left:0; margin:0 !important; translate:none !important; }
.nimi-jalki__n--viiva::before{ content:none; }
.nimi-jalki__n--tayte{ color:var(--puna); -webkit-text-stroke:0; }
.nimi-jalki__n--tayte::before{ content:none; }
/* Nimi pelkkänä ääriviivana ennen läsähdystä. */
.hero__nimi.nimi--viiva::before{ visibility:hidden; }
@keyframes hero-varmistus-p{ to{ clip-path:none; } }
.ote-sana{ display:inline-block; will-change:transform, filter; }

/* ROLODEX: asiakkaan nimi jättitekstinä korttien takana (brandstein.js,
   Jenna 21.10.2026). Kortin alla olevalla vapaalla kaistalla, jotta nimi
   luetaan kokonaan; kaatuva kortti pyyhkäisee sen edestä. Lavan alareunan
   häivytys alkaa siksi vasta 90 %:sta. */
.rolo__nimet{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rolo__nimi{
  position:absolute; left:50%; top:86%; white-space:nowrap;
  font-family:var(--f-nimi); text-transform:uppercase; line-height:.8; letter-spacing:-.01em;
  color:var(--puna); will-change:transform, opacity;
}
.rolo__lava > .refet__yla, .rolo__lava > .rolo{ position:relative; z-index:1; }
@media (max-width:700px){ .rolo__nimi{ top:80%; } }
.rolo__lava{ -webkit-mask-image:linear-gradient(to bottom, #000 90%, transparent 100%); mask-image:linear-gradient(to bottom, #000 90%, transparent 100%); }
@media (prefers-reduced-motion:reduce){ .rolo__nimet{ display:none; } }

/* ============================================================
   SIVUJEN HEROT (Jenna 21.10.2026: "kaikki herot samalla asettelulla ja
   fonttikoilla kuin bränditalo-hero"). Mitat suoraan .bh:sta
   (branditalo.css). Otsikon väri tulee sivulta.
   ============================================================ */
.sivu-hero{
  min-height:100vh; 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); margin:0;
}
.sivu-hero__yla{ margin:0; font-family:var(--f-eyebrow); font-size:clamp(30px,3.8vw,68px); line-height:1; color:var(--puna); text-transform:none; letter-spacing:0; }
.sivu-hero .sivu-hero__ot{
  margin:0; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; letter-spacing:-.015em;
  font-size:min(23vw, 42svh) !important; line-height:1; padding-top:.1em; width:auto; max-width:none;
}
.sivu-hero__ala{ margin:0; 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; }

/* KIRJAINTEN ASKELLEVEYS (Iines 21.10.2026): otsikoiden kirjaimet ovat omia
   liikkuvia elementtejään (Palvelut .tk, Bränditalo/Ideologia .syv-k,
   Referenssit .ik, Tiimi .t-merkki). Safari rajaa liikkuvan elementin kerroksen
   sen laatikon kokoiseksi, joten vinon kirjaimen askelleveyden ylittävä osa
   leikkautui (P, V, T). Sivuttainen täyte kasvattaa laatikkoa, negatiivinen
   marginaali pitää kirjainvälin ennallaan. */
/* Sama yläreunassa: Ä- ja Ö-pisteet nousevat laatikon yli ja leikkautuivat
   (Työnäytteet, Iines 21.10.2026). */
.tk, .syv-k, .ik, .t-merkki, .ab-k, .ote-sana{ padding:.4em .3em 0; margin:-.4em -.3em 0; }   /* .3em: Macin Safari rajasi vielä .16em:llä (Iines 23.10.2026) */

/* Footer on punainen: kun se on ylänurkan kohdalla, MENU ja leima kääntyvät
   vaaleiksi (brandstein.js lisää luokan body.footer-alla). */
body.footer-alla .p-menu, body.footer-alla .palkki__p{ background:var(--kerma); color:var(--puna); }
body.footer-alla .leima-oikea{ color:var(--kerma); }

/* ============================================================
   PILLERIN NUMEROT JA KERMAKOROSTUS (Jenna 21.10.2026)
   Numerot käsialalla (sama fontti kuin "art of branding") yläindeksinä
   linkin edessä. Hoverissa kermanvärinen pilleri liukuu linkin taakse
   (brandstein.js), ja linkki muuttuu punaiseksi.
   ============================================================ */
.palkki__p{ position:relative; counter-reset:palkki; }
.palkki__l{ counter-increment:palkki; z-index:1; }
.palkki__l::before{
  content:counter(palkki, decimal-leading-zero);
  font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em;
  font-size:1.15em; line-height:1; vertical-align:.12em; margin-right:.2em;
  display:inline-block;
}
.palkki__koros{
  position:absolute; left:0; top:12%; bottom:12%; width:0; z-index:0;
  border-radius:999px; background:currentColor; opacity:0; pointer-events:none;
}
/* Väri vaihtuu vasta kun pilleri on ehtinyt alle (muuten punainen punaisella). */
.palkki__l.korostettu{ color:var(--puna); transition:color 160ms linear 110ms; }
.palkki--kaanteinen .palkki__l.korostettu{ color:var(--kerma); }
.palkki.kapea .palkki__koros{ opacity:0 !important; }
/* Kermapilleri korvaa alleviivauksen. */
.palkki__l .palkki__viiva{ display:none; }
/* Leveässä pillerissä piilotettu MENU ei saa viedä omaa väliään
   (space-evenly): oikealle jäi ~45 px enemmän tilaa kuin vasemmalle. */
.palkki:not(.kapea) .palkki__m{ position:absolute; right:0; }

/* "art of branding." KÄSIN PIIRRETTYNÄ (Jenna 22.10.2026, brandstein.js):
   fonttiteksti jää läpinäkyväksi mittakaavaksi, ja sanan päällä on kaksi
   vuorottelevaa framea maskina (tussi-b-tahti 180 ms). */
.ote-sana--kuva{ position:relative; color:transparent; white-space:nowrap; overflow:visible; vertical-align:top; }
/* Ei sivutäytettä (Jenna 23.10.2026: "art o branding ilman välejä"):
   Safari-täytteen negatiiviset marginaalit vetivät sanat 0,6 em
   päällekkäin. Sana on kuva, joten Safarin glyfirajaus ei koske sitä. */
.ote-sana.ote-sana--kuva{ padding-inline:0; margin-inline:0; }
.ote-sana--kuva::before, .ote-sana--kuva::after{
  content:''; position:absolute; left:0; right:0; top:var(--ote-yla, 0); height:var(--ote-h, 1em);
  background:var(--ote-vari, var(--ruskea));
  -webkit-mask:var(--k1) left center / auto 100% no-repeat; mask:var(--k1) left center / auto 100% no-repeat;
}
.ote-sana--kuva::after{ -webkit-mask-image:var(--k2); mask-image:var(--k2); opacity:0; }
html.tussi-b .ote-sana--kuva::before{ opacity:0; }
html.tussi-b .ote-sana--kuva::after{ opacity:1; }
.ote-sana--art{ --k1:url('../img/etusivu/ote-art-1.webp'); --k2:url('../img/etusivu/ote-art-2.webp'); }
.ote-sana--of{ --k1:url('../img/etusivu/ote-of-1.webp'); --k2:url('../img/etusivu/ote-of-2.webp'); }
.ote-sana--branding{ --k1:url('../img/etusivu/ote-branding-1.webp'); --k2:url('../img/etusivu/ote-branding-2.webp'); }
.hero__alaote.punaisella{ --ote-vari:var(--kerma); }

/* EI VÄRINÄÄ HEROISSA (Jenna 22.10.2026: "kaikista heroista pois tuo
   kirjainten värinä"): etusivun art of branding ja Palvelut-heron
   kirjaimet pysyvät paikallaan. Piirroksen framevaihto jää. */
.hero__alaote, .p-otsikko .tk, .sivu-hero__ot, .sivu-hero__ot *{ animation:none !important; }

/* FOOTERIN KUVA FEIDAUTUU SIVUN TAUSTAAN (Jenna 22.10.2026: "ei tule
   noin tiukkaa rajaa kuvan ja taustan välillä"). Footerilla ei ole omaa
   taustaväriä, ja kuvakerros (tumma pohja + kuva) häivytetään yläreunasta,
   joten yläpuolisen osion tausta jatkuu sen alle. */
.footer{ background:transparent; }
/* Häivytys poistettu (Iines 23.10.2026). */
/* Ohut erotinviiva pois footerin yläreunasta (Jenna 22.10.2026): se jäi
   näkyviin feidin päälle tiukkana rajana. */
.footer__sisalto{ border-top:0; }

/* TYÖNÄYTTEET VAALEALLA (Jenna 22.10.2026): kerma tausta, tumma teksti.
   Tumma toimistokuva ja revityn paperin reuna pois, koska ne kuuluivat
   tummaan versioon (tagi etusivu-tyot-moblinks). */
.tyot{ background:var(--kerma); color:var(--musta); }
.tyot__tausta, .tyot__vuoret{ display:none; }
.tyot__linkki{ color:var(--musta); }
.tyot__kuvakehys::after{ opacity:0; }
body.tyot-alla .leima-oikea{ color:inherit; }
/* Kuviin pehmeä varjo vaaleaa taustaa vasten (Iines 23.10.2026). */
.tyot__kuvakehys{ box-shadow:0 2px 4px rgba(25,25,25,.10), 0 18px 30px -10px rgba(25,25,25,.28), 0 40px 70px -30px rgba(25,25,25,.35); }

/* VIERITYSPALKKI (Jenna 23.10.2026): punainen kahva, raita sivun
   taustan värinen. scrollbar-color: Chrome 121+, Edge, Firefox;
   ::-webkit-scrollbar: Safari (Chrome ohittaa sen, kun scrollbar-color
   on asetettu). Macin piilotetut palkit näkyvät vain vieritettäessä. */
html{ scrollbar-color:var(--puna) transparent; }
html::-webkit-scrollbar{ width:12px; background:transparent; }
html::-webkit-scrollbar-track{ background:transparent; }
html::-webkit-scrollbar-thumb{ background:var(--puna); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }

/* NAPPIEN TUSSIHOVER (brandstein.js, Jenna 23.10.2026, esikuva
   two26.studio): veto napin pinnan ja tekstin välissä. Punaisilla napeilla
   veto on tumma, muilla punainen. Vanhat hover-täytöt pois. */
.tussihover{ position:relative; overflow:hidden; isolation:isolate; --tussi:var(--puna); }
.tussihover .tussihover__veto{ position:absolute; inset:0; width:100%; height:100%; max-width:none; z-index:-1; pointer-events:none; overflow:visible; }
.tussihover__veto path{ fill:none; stroke:var(--tussi); stroke-linecap:round; stroke-linejoin:round; }
.r-nappi.tussihover, .t-nappi.tussihover, .bcta__nappi.tussihover, .c-seuraava__nappi.tussihover, .p-nappi--puna.tussihover{ --tussi:var(--musta); }
.r-nappi.tussihover::before{ display:none; }
.p-nappi.tussihover:hover{ background:var(--musta); translate:none; }
.p-nappi--reuna.tussihover:hover{ background:transparent; color:var(--musta); }
.p-nappi--reuna.tussihover{ --tussi:var(--puna); }
.p-nappi--puna.tussihover:hover{ background:var(--puna); }
.t-nappi.tussihover:hover{ background:var(--puna); }
.bcta__nappi.tussihover:hover{ background:var(--puna); color:var(--kerma); translate:none; }
.c-seuraava:hover .c-seuraava__nappi.tussihover{ background:var(--puna); color:var(--kerma); }

/* ABOUT: teksti ja kuvio yhtenä lohkona keskelle näyttöä (Jenna 23.10.2026). */
@media (min-width:861px){
  .about__grid{ grid-template-columns:auto auto; justify-content:center; }
  .about__vasen{ justify-self:start; }
  .ksi{ width:min(46vw, 78vh, 860px); }
}
/* Tussihover myös MENU-napeissa ja Takaisin alkuun -napissa (Jenna 23.10.2026). */
.p-menu.tussihover, .palkki__p.tussihover{ --tussi:var(--musta); }
.palkki--kaanteinen .palkki__p.tussihover{ --tussi:var(--puna); }
.c-alkuun.tussihover{ --tussi:var(--puna); }
html body .p-menu.tussihover:hover{ background:var(--puna); color:var(--kerma); translate:none; }
html body .c-alkuun.tussihover:hover{ background:var(--musta); color:var(--kerma); }
.palkki:not(.kapea) .palkki__p .tussihover__veto{ display:none; }
.palkki__m .palkki__viiva{ display:none; }   /* tussihover korvaa alleviivan myös MENUssa */
/* Numerot pois pilleristä (Jenna 23.10.2026). */
.palkki__l::before{ content:none; }

/* TUSSIHOVER PUNAISELLA POHJALLA (Jenna 23.10.2026): veto on aina musta,
   ettei nappi katoa punaiseen, ja teksti kerma. Kun veto on täyttänyt
   napin, myös napin oma pohja vaihtuu vedon väriin, jottei reunaan jää
   vaaleaa kehää (pyöristyksen antialiasointi). */
.palkki--kaanteinen .palkki__p.tussihover, body.punainen .p-menu.tussihover, body.punaisella .p-menu.tussihover{ --tussi:var(--musta); }
.palkki--kaanteinen .palkki__p.tussihover:hover, body.punainen .p-menu.tussihover:hover, body.punaisella .p-menu.tussihover:hover{ color:var(--kerma); }
.palkki--kaanteinen .palkki__p.tussihover:hover .palkki__m{ color:var(--kerma); }
html body .tussihover:hover{ background-color:var(--tussi) !important; transition:background-color 0s linear .42s, color 160ms linear; }
html body .palkki:not(.kapea) .palkki__p.tussihover:hover{ background-color:var(--puna) !important; }
html body .palkki--kaanteinen:not(.kapea) .palkki__p.tussihover:hover{ background-color:var(--kerma) !important; }

/* ============================================================
   ETUSIVU PUHELIMELLA (Jenna 23.10.2026: "kaikki elementit aivan liian
   pieniä, deskarin asiat vain kutistettu mobiiliin"). Oma mitoitus alle
   700 px: nimi kahdella rivillä (brandstein.js), Made with kolmella,
   tekstit 15–16 px ja pienet merkinnät 11 px. Vain etusivun osiot.
   Yhteiset puhelinkorjaukset (leima, meta, footer) ovat seuraavassa lohkossa.
   ============================================================ */
@media (max-width:700px){
  /* HERO: BRAND / STEIN ruudun levyisenä pinona. */
  .hero__nimi--rivit{ white-space:normal; line-height:.8; }
  /* Koko ruudun korkuinen (Jenna 26.10.2026: ensimmäisessä näkymässä ei saa näkyä
     seuraavaa punaista osiota). lvh: myös läpikuultavan osoitepalkin alla. */
  .hero{ padding-top:calc(var(--reuna) + 40px); min-height:100vh; min-height:100lvh;
    /* Pino keskelle NÄKYVÄÄ aluetta (Jenna 26.10.2026: "himpun ylempänä, nyt
       näyttää address barin kanssa olevan liian alhaalla"): lvh:n ja svh:n ero
       eli palkkien alle jäävä osa alareunan täytteeksi, ja 6 svh lisää ylös. */
    padding-bottom:calc(100lvh - 100svh + 6svh); }

  /* MADE WITH: vaihtuva sana omalle rivilleen keskelle. */
  .made__vaite .rivi--2 .made__vaihto{ display:grid; margin-inline:auto; justify-items:center; }
  .made__sisus .hi__teksti{ font-size:15px; line-height:1.55; }
  .made__sisus .hi__teksti--v{ top:calc(var(--reuna) + 64px); }
  .made__sisus .hi__teksti--o{ bottom:max(10%, 64px); }

  /* TYÖNÄYTTEET */
  .tyot__otsikko{ font-size:clamp(44px,15vw,64px); white-space:normal; }
  .tyot__linkki{ width:calc(100vw - 2 * var(--reuna) - 28px); }
  .tyot__nimi{ font-size:clamp(26px,8.4vw,34px); white-space:normal; }
  .tyot__tagit{ font-size:12px; line-height:1.5; }
  .tyot__nuoli{ width:48px; }

  /* ABOUT */
  .about{ padding-block:72px 64px; overflow-x:clip; }   /* About-sanojen maskin sivutäyte ylitti ruudun */
  .about__otsikko{ font-size:clamp(5rem,30vw,9rem); }
  .about__teksti{ font-size:16px; line-height:1.6; }
  .ksi__sana{ font-size:72px; }

  /* INSTAGRAM */
  .ig__otsikko{ font-size:clamp(3rem,15vw,4.5rem); }

}

/* ============================================================
   KAIKKI SIVUT PUHELIMELLA (Jenna 23.10.2026: "käy seuraavatkin sivut
   läpi"). Yhteiset korjaukset; sivukohtaiset ovat sivujen omissa
   tiedostoissa samannimisen otsikon alla.
   ============================================================ */
@media (max-width:700px){
  /* Ylänurkan leima häipyy, kun sivua on vieritetty (brandstein.js
     body.leima-pois): kiinteänä se jäi tekstien päälle. */
  .leima-oikea{ transition:opacity 300ms linear, color 400ms linear; }
  body.leima-pois .leima-oikea{ opacity:0; }
  body .leima-oikea, body .p-kulma .leima-oikea{ font-size:12px !important; }

  /* MENU-nappi sormen kokoiseksi (oli 13 px ja 30 px korkea). */
  body .p-menu{ font-size:15px; padding:.85em 1.5em .8em; }
  body .p-kulma{ height:auto; }

  /* Pienet merkinnät luettaviksi. */
  .meta--mono{ font-size:11px; letter-spacing:.14em; }

  /* Alasivujen herot: otsikko täyttää rivin (brandstein.js), eikä tyhjää
     ruudun korkuista tilaa. */
  .sivu-hero, .p-hero, .bh, .i-alku{ min-height:82svh; }
  .sivu-hero__ala, .p-hero__ala, .bh__ala, .i-alku__lause{ font-size:17px; }

  /* FOOTER: linkit sormen kokoisiksi. */
  .footer__lista{ gap:.15em; }
  .footer__lista a, .footer__teksti{ font-size:19px; line-height:1.6; }
  .footer__ots, .footer__pieni{ font-size:11px; }
}

/* REUNAKEHÄ POIS (Jenna 23.10.2026: "jää vähän reunaviivaa"). Napin pohja
   ja veto pehmenivät samassa pyöristetyssä reunassa, ja pohjan väri vuoti
   vedon alta ohuena kehänä. Pohja piirretään nyt 1 px sisemmäs
   (läpinäkyvä reuna + padding-box), ja veto ulottuu reunaan asti. */
.tussihover{ background-clip:padding-box; }
.tussihover:not(.c-alkuun){ border:1px solid transparent; }
.tussihover .tussihover__veto{ inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); }

/* HI-osion leipätekstit kuten alussa (Iines 23.10.2026): ensimmäinen
   vasemmalla ylhäällä, toinen oikealla alhaalla. */
@media (min-width:861px){
  .made__sisus .hi__teksti--v{ top:calc(var(--reuna) + 70px); bottom:auto; left:var(--reuna); right:auto; text-align:left; }
  .made__sisus .hi__teksti--o{ top:auto; bottom:clamp(40px,9vh,110px); right:var(--reuna); left:auto; text-align:left; }
  .made__sisus::after{ display:none; }
}

/* MENU-PAINIKE PUHELIMELLA (Iines 23.10.2026): teksti pillerin keskelle ja
   koko painike isommaksi. Etusivun pillerissä piilotetut valikkolinkit
   (leveys 0) veivät yhä tilaa täytteellään ja space-evenly-väleillä, jolloin
   MENU oli 5 px oikealla. Teksti istui myös hieman yläpuolella: lisää
   yläreunaan. */
.palkki.kapea .palkki__p{ justify-content:center; }
.palkki.kapea .palkki__l{ padding-right:0; }
.palkki.kapea .palkki__m{ padding-inline:.08em; }   /* symmetrinen: vino kirjain ei siirrä keskikohtaa */
@media (max-width:700px){
  /* Etusivun hero-pilleri selvästi isommaksi (Iines 23.10.2026: "edelleen liian pieni"). */
  .palkki__m{ font-size:28px !important; }
  .palkki.kapea .palkki__p{ min-height:60px; min-width:140px; padding-inline:36px; padding-top:1px; }
  body .p-menu{ font-size:18px; padding:.98em 1.6em .74em; }
}

/* HI-OSIO PUHELIMELLA KESKITETTYNÄ (Iines 26.10.2026): leipätekstit
   keskelle ja lähelle otsikkoa, jolloin teksti, otsikko ja teksti ovat yksi
   ruudun keskelle asettuva ryhmä. Otsikko on ruudun keskellä; --vaite-h on sen
   mitattu korkeus (brandstein.js, sovitaVaite), väli 26 px. */
@media (max-width:700px){
  .made__sisus .hi__teksti--v,
  .made__sisus .hi__teksti--o{ left:var(--reuna); right:var(--reuna); text-align:center; max-width:none; margin-inline:auto; }
  .made__sisus .hi__teksti--v{ top:auto; bottom:calc(50% + var(--vaite-h, 220px) / 2 + 26px); }
  .made__sisus .hi__teksti--o{ top:calc(50% + var(--vaite-h, 220px) / 2 + 26px); bottom:auto; }
}

/* ============================================================
   iOS: SISÄLTÖ PALKKIEN JA DYNAMIC ISLANDIN ALLE (Jenna 26.10.2026)
   viewport-fit=cover (kaikkien sivujen meta) piirtää sivun myös tilarivin
   ja saaren taakse. Kiinteät napit siirretään turva-alueen verran alas,
   etteivät ne jää saaren alle. Vain kosketusnäytöillä: työpöytä ennallaan.
   ============================================================ */
@media (hover:none){
  html body .p-kulma{ top:calc(var(--reuna) + env(safe-area-inset-top, 0px)); }
  html body .p-kulma .p-menu{ top:calc(clamp(14px,1.8vw,26px) + env(safe-area-inset-top, 0px)); }
  html body .palkki{ top:calc(clamp(14px,1.8vw,26px) + env(safe-area-inset-top, 0px)); }
  html body .leima-oikea{ top:calc(var(--reuna) + env(safe-area-inset-top, 0px)); }
  html body .valikko{ top:calc(8px + env(safe-area-inset-top, 0px)); bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* PUHELIMELLA EI KOKO RUUDUN KIINTEITÄ KERROKSIA (Jenna 26.10.2026; ks.
   iOS 26: kiinteä läpinäkyvä kerros ruudun reunassa esti Safaria
   näyttämästä sisältöä palkkien alla). Rae vierii sivun mukana. */
@media (max-width:860px){
  .rae{ position:absolute; }
}

/* Footerin neonkuva tummennettuna kosketusnäytöillä (Jenna 26.10.2026), jotta
   vaaleat tekstit erottuvat, kun punainen on väistynyt (brandstein.js). */
@media (hover:none){
  .footer__kuva::after{ content:''; position:absolute; inset:0; background:rgba(25,25,25,.6); pointer-events:none; }
}

/* TYÖNÄYTTEET PYSTYSSÄ PUHELIMELLA (Jenna 26.10.2026: "mobiiliin sopisi
   paljon paremmin pysty"). 4:5-kehys; jokaisella kuvalla oma kohdistus
   (--kp, index.html), ja kolmella kortilla puhelimelle oma pystyyn sopiva
   kuva (<picture>). Kuvanvaihto pyörii itsestään (etusivu-tyot.js). */
@media (max-width:700px){
  .tyot__kuvakehys{ aspect-ratio:4 / 5; }
  .tyot__kuva{ object-position:var(--kp, 50%) var(--kpy, 50%); }   /* --kpy:100% = alareuna näkyy (Meriläisen joulujulisteen teksti kokonaan, Jenna 26.10.) */
}
/* Oulu in Moviesin logo ei mahdu pystyrajaukseen: koko logo logon omaa
   taustaväriä (mitattu kuvasta, #FA6C5F) vasten. */
@media (max-width:700px){
  .tyot__kuva--logo{ object-fit:contain; background:#FA6C5F; }
}

/* SIVUN LOPPU iOS:N PALKIN TAKANA (Jenna 26.10.2026: footer "loppuu vaaleaan
   palkkiin kuvan alla"). Safari näyttää sivun lopussa alapalkin takana sivun
   pohjavärin (html). Kosketusnäytöillä pohja on tumma ja footerin kuvan
   tummennus syvenee alareunassa samaan tummaan, joten sauma katoaa. Sisältö
   pysyy omanvärisenä: body peittää koko sivun. */
@media (hover:none){
  /* Ylhäällä vaalea (heron yläpuolella Dynamic Islandin kohdalla), tumma vasta
     kun footer on ruudulla (brandstein.js html.sivun-loppu; Jenna 26.10.2026). */
  html{ background:var(--kerma); }
  html.sivun-loppu{ background:var(--musta); }
  html:has(body.tumma){ background:var(--musta); }   /* tummat herot (referenssit, asiakassivut) */
  body{ min-height:100vh; min-height:100lvh; }
  .footer__kuva::after{ background:linear-gradient(rgba(25,25,25,.6) 50%, var(--musta) 100%); }
}
/* Safari laskee alapalkin takana näkyvän värin html:n JA bodyn taustasta,
   ja bodyn väri voittaa (WebKit, documentBackgroundColor) — tumma html ei
   yksin riittänyt, kun body oli beige (Jenna 26.10.2026, kuvakaappaus).
   Kosketusnäytöillä beigen bodyn sivuilla body on läpinäkyvä ja beige on
   sisältöalueilla, joten ulkoasu ei muutu. Tummat sivut ovat jo tummia. */
@media (hover:none){
  body:not(.sivu-ideologia):not(.sivu-tiimi):not(.sivu-branditalo){ background:transparent; }
  /* :where = tarkkuus 0: osioiden omat taustat voittavat. */
  :where(body:not(.sivu-ideologia):not(.sivu-tiimi):not(.sivu-branditalo)) > :where(header, main, section){ background-color:var(--kerma); }
}

/* HI-LENTO PUHELIMELLA ilman pinnausta (brandstein.js, .lento): vektorimuoto
   näkyviin ja lento rajattu osioon. */
.made.valmis.lento{ overflow:visible; clip-path:inset(-240px 0 0 0); }   /* yläreunan yli saa piirtää (tussi), sivut ja alareuna rajattu */
.made.valmis.lento .made__peite{ display:block; }
.made.valmis.lento .hi-taso{ overflow:visible; }
.made.valmis.lento .hi__keski{ overflow:clip; }   /* H:n lento pysyy ruudussa */
/* Human intelligence -merkinnän tussipiirto jatkuu näin punaisen reunan yli
   kermalle (Jenna 26.10.2026). */

/* VALIKKO KOSKETUSNÄYTÖLLÄ ilman ruudun reunoihin ulottuvaa himmennystä
   (Jenna 26.10.2026: menun auetessa palkkien alla oli tumma kaistale). Kortti
   peittää ruudun lähes kokonaan; kerros jää läpinäkyväksi napautusalueeksi,
   joka sulkee valikon. */
@media (hover:none){
  .vari{ background:transparent; }
}

/* MOBIILIVALIKKO REUNASTA REUNAAN (Jenna 26.10.2026: "tausta ihan oikeaan
   reunaan asti, nyt jää pieni aukko"). Puhelimella kortti on koko ruudun
   levyinen ilman sivuaukkoja ja pyöristyksiä. */
/* KOKO NÄKYMÄN VALIKKO PUHELIMELLA (Jenna 26.10.2026: "mobiilimenu ilmestyy
   vasemmasta reunasta ja täyttää koko näkymän", kaikilla sivuilla). Kerma
   kortti peittää koko suuren näkymän (100lvh, myös Safarin palkkien ja
   Dynamic Islandin alta), sisältö turva-alueiden sisällä. Ei himmennystä eikä
   html-lukitusta (iOS-kaistale, 91871b2); avoinna sivun pohja ja body ovat
   kermaa, jotta Safarin palkkien taustakin on kermaa myös tummilla sivuilla. */
@media (max-width:860px){
  /* YLITÄYTTÖ (Jenna 26.10.2026: "välillä yläreuna ja alareuna ei täyty"):
     kun Safarin palkit ovat laajennettuina, kiinteän elementin top:0 alkaa
     tilarivin alta ja 100lvh loppuu palkin yläpuolelle. Kortti ulottuu siksi
     120 px ruudun yli kummastakin päästä, ja sisältö siirtyy saman verran. */
  html body .valikko{
    --yli:50vh;   /* 120 px ei riittänyt oikealla iPhonella kesken sivun (palkkien tila) */
    left:0; right:auto; top:calc(var(--yli) * -1); bottom:auto; width:100%; max-width:none; margin:0;
    height:calc(100vh + var(--yli) * 2); height:calc(100lvh + var(--yli) * 2); --pyor:0px; border-radius:0;
    padding:calc(env(safe-area-inset-top, 0px) + 76px + var(--yli)) calc(env(safe-area-inset-right, 0px) + 24px)
            calc(env(safe-area-inset-bottom, 0px) + 40px + var(--yli)) calc(env(safe-area-inset-left, 0px) + 24px);
  }
  .valikko__sulje{ top:calc(env(safe-area-inset-top, 0px) + 14px + 50vh); right:calc(env(safe-area-inset-right, 0px) + 14px); }
  /* Linkit heti X-rivin alta eikä keskellä (Jenna 26.10.2026: "menu itemit
     ylempänä näytöllä"). */
  html body .valikko ul{ margin-block:0 auto; }
  html:has(body[data-valikko]), html body[data-valikko]{ background:var(--kerma) !important; }
}

/* Puhelimella MENU-teksti valmiina heti, kun pilleri näkyy: ei leveyden
   kasvua eikä viivettä (Jenna 26.10.2026). */
@media (max-width:700px){
  .palkki.kapea .palkki__m{ transition:none; }
}

/* FOOTER KAPEALLA PUHELIMELLA (Jenna 26.10.2026): BRANDSTEIN-sanan laatikko
   oli ruutua leveämpi (375 px: 384 px), joten sana valui oikeaan reunaan.
   Keskitetään ylivuotava laatikko, jolloin reunoihin jää yhtä paljon ilmaa.
   "Ota yhteyttä" katkesi alle 390 px:n ruudulla kahdelle riville. */
.footer__nimi{ justify-self:center; }
@media (max-width:389px){
  .footer__lista a, .footer__teksti{ font-size:17px; }
}

/* MENU VÄISTYY PUHELIMELLA (Jenna 26.10.2026, brandstein.js lisää
   html.menu-piilossa): pilleri liukuu yläreunan yli alas vieritettäessä
   ja palaa ylös vieritettäessä. Lähtö nopea (power2.in), paluu expo.out.
   Alasivuilla liikkuu itse .p-menu (kiinteä), etusivulla tarttuva .palkki. */
@media (max-width:860px){
  html body .p-menu{ transition:background 260ms linear, color 260ms linear, translate 520ms cubic-bezier(.16,1,.3,1); }
  .palkki{ transition:translate 520ms cubic-bezier(.16,1,.3,1); }
  html.menu-piilossa body .p-menu{ translate:0 calc(-100% - 40px - env(safe-area-inset-top, 0px)); transition-duration:260ms, 260ms, 340ms; transition-timing-function:linear, linear, cubic-bezier(.55,0,1,.45); }
  html.menu-piilossa .palkki{ translate:0 calc(-100% - 40px - env(safe-area-inset-top, 0px)); transition:translate 340ms cubic-bezier(.55,0,1,.45); }
}

/* SISÄÄNTULOT: leipätekstit ja IG-ruudut (brandstein.js, Jenna 26.10.2026). */
.tulo{ opacity:0; translate:0 24px; }
.tulo.tulo--nakyy{ opacity:1; translate:0 0;
  transition:opacity var(--tulo-kesto,800ms) cubic-bezier(.16,1,.3,1) var(--tulo-viive,0ms), translate var(--tulo-kesto,800ms) cubic-bezier(.16,1,.3,1) var(--tulo-viive,0ms); }
.tulo-ig{ translate:0 40px; }
.tulo-ig .ig-ruutu__kuva{ clip-path:inset(100% 0 0 0); }
.tulo-ig .ig-ruutu__teksti{ opacity:0; }
.tulo-ig.tulo--nakyy{ translate:0 0; transition:translate var(--tulo-kesto,1000ms) cubic-bezier(.16,1,.3,1) var(--tulo-viive,0ms); }
.tulo-ig.tulo--nakyy .ig-ruutu__kuva{ clip-path:inset(0 0 0 0); transition:clip-path var(--tulo-kesto,1000ms) cubic-bezier(.16,1,.3,1) var(--tulo-viive,0ms); }
.tulo-ig.tulo--nakyy .ig-ruutu__teksti{ opacity:1; transition:opacity 600ms linear calc(var(--tulo-viive,0ms) + 300ms); }
/* Napautuksella nuoli piirtyy nopeammin, jotta se on valmis ennen sivun
   vaihtumista (brandstein.js, 450 ms). */
.valikko__l.napautettu .valikko__nuoli path{ transition:stroke-dashoffset 260ms cubic-bezier(.16,1,.3,1), opacity 0s; }
.valikko__l.napautettu .valikko__nuoli path + path{ transition-delay:160ms; }
.valikko__l.napautettu .valikko__nimi{ transition-duration:400ms; }
/* Instagram-osion @brandstein-tussiympyrä ylitti ruudun 5 px:llä ja levitti
   puhelimen näkymää (375 -> 380 px). */
@media (max-width:860px){ .ig{ overflow-x:clip; } }

/* HI JA MADE WITH YHTENÄ KOHTAUKSENA PUHELIMELLA (Jenna 26.10.2026, A).
   Made with -osio nousee 45 vh HI-ruudun päälle: lennon lopussa (HI-ruudun
   alareuna 45 %:n korkeudella, brandstein.js) koko näkymä on Made with -osiota,
   ja sen tekstit nousevat H:n kerman sisään. Osio on läpinäkyvä: koko kohtaus
   on punainen, kunnes H:n kerma täyttää sen. */
@media (max-width:860px){
  .made.valmis.lento .made__sisus{ margin-top:-70vh; background:transparent; }   /* = lennon loppu, HI-ruudun alareuna 70 %:ssa */   /* punainen kunnes H:n kerma täyttää */
}

/* FOOTERIN PUNAINEN SAMAKSI KUIN SIVUN (Jenna 26.10.2026): Chrome nostaa
   WebGL-canvasin omaksi kerroksekseen, jonka Windows värinhallintoineen
   yhdistää eri tavalla kuin muun sivun (Jennan näytöllä footer 240,61,40 vs.
   sivu 255,54,0, selaimen omassa kaappauksessa samat). Lähes täysi
   peittävyys pitää canvasin samassa kerroksessa muun sivun kanssa. */
.footer__neste{ opacity:.999; }
/* Meriläisen joulujuliste puhelimella: tilaa alareunan tekstin alle
   (Jenna 26.10.2026). Kuva kutistuu sisältölaatikkoonsa, ja padding-alue
   jatkuu julisteen omalla lähes mustalla pohjavärillä (#080604). */
@media (max-width:860px){
  .tyot__kuva--juliste{ box-sizing:border-box; padding:6% 0 5%; background-color:#080604; object-fit:contain !important; }
}

/* Kosketusnäytöllä valikossa ei nuolta eikä siirtymää oikealle: napautettu
   linkki muuttuu heti punaiseksi ja sivusiirtymä alkaa (Jenna 26.10.2026).
   Työpöydän hover ennallaan. */
@media (hover:none){
  .valikko__nuoli{ display:none; }
  .valikko__l:hover .valikko__nimi, .valikko__l:focus-visible .valikko__nimi, .valikko__l.napautettu .valikko__nimi{ translate:none; }
  .valikko__l:hover, .valikko__l:focus-visible{ color:inherit; }
  .valikko__l.nyt:hover, .valikko__l.nyt:focus-visible{ color:var(--puna); }
  .valikko__l.napautettu, .valikko__l.napautettu.nyt{ color:var(--puna); }   /* punainen (Jenna 26.10.2026, korjattu ohje) */
}

/* VALIKKO AUKI: SIVU PIILOON KOSKETUSNÄYTÖLLÄ (Jenna 26.10.2026: "kun avaa
   menun kesken sivun, ylä- ja alareunoihin jää sivun sisältöä"). iOS
   rajaa kiinteät elementit omaan alueeseensa, ja palkkien alle piirtyy
   vieritetty sivu, joten ylisuurikaan valikkokortti ei peittänyt sitä. Nyt
   valikon avauduttua (900 ms, liuku näkyy) sivun sisältö piilotetaan, ja
   palkkien alla näkyy vain kermanvärinen sivun pohja (html, ks. yllä).
   Sulkiessa sisältö palaa heti. Siirtymäkerrokset (.siirtyma, .kansi-siirto)
   jäävät näkyviin. */
@media (hover:none) and (max-width:860px){
  body > :not(.valikko):not(.vari):not(.siirtyma):not(.kansi-siirto):not(script){ transition:visibility 0s; }
  body[data-valikko] > :not(.valikko):not(.vari):not(.siirtyma):not(.kansi-siirto):not(script){
    visibility:hidden !important; transition:visibility 0s linear 700ms;   /* verhon jälkeen (brandstein.js) */
  }
  body[data-valikko]::before, body[data-valikko]::after{ visibility:hidden; }
}

/* Verho ylhäältä alas (brandstein.js): valikon oma vasemmalta tuleva liuku ja
   himmennys pois, kortin rajauksen hoitaa skripti. Sulkiessa kortti pysyy
   näkyvissä verhon vetäytymisen ajan (data-valikko-verho). */
@media (hover:none) and (max-width:860px){
  html body .valikko, html body[data-valikko] .valikko{ transition:none; }
  body[data-valikko] .valikko, body[data-valikko-verho] .valikko{ visibility:visible; }
  body[data-valikko-verho]:not([data-valikko]) .valikko{ clip-path:inset(0); }
}

/* About-osion linkki Ideologia-sivulle (Jenna 26.10.2026): leipätekstin
   kokoinen linkki, punainen ja alleviivattu kuten muualla sivustolla. */
.ab-linkki{ color:var(--puna); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }
.ab-linkki:hover{ text-decoration-thickness:2px; }

/* BRANDSTEININ LEIMA VALIKOSSA (Jenna 26.10.2026): punainen leima kortin
   oikeassa alakulmassa, osin reunan yli; linkit sen päällä. Leima kiertyy
   paikalleen valikon auetessa. position:fixed, jotta reunan yli menevä osa
   ei kasvata kortin vieritysaluetta; kortin clip-path rajaa sen. */
.valikko ul{ position:relative; z-index:1; }
.valikko{ --kl:min(calc(100vw - 16px), max(520px, 50vw)); --lw:min(calc(var(--kl) * .56), 62vh); }
.valikko::before{
  content:''; position:fixed; z-index:0; pointer-events:none;
  width:var(--lw); aspect-ratio:558.89 / 580.28;
  left:calc(8px + var(--kl) - var(--lw) * .8); bottom:calc(8px - var(--lw) * .2);
  background:url('../img/leima.svg') center / contain no-repeat;
  opacity:0; rotate:-28deg; scale:.86;
  transition:opacity 200ms linear, rotate 300ms cubic-bezier(.55,0,.45,1), scale 300ms cubic-bezier(.55,0,.45,1);
}
body[data-valikko] .valikko::before{
  opacity:1; rotate:-8deg; scale:1;
  transition:opacity 500ms linear 350ms, rotate 1100ms cubic-bezier(.16,1,.3,1) 350ms, scale 1100ms cubic-bezier(.16,1,.3,1) 350ms;
}
@media (max-width:860px){
  .valikko{ --lw:min(62vw, 40vh); }
  .valikko::before{ left:calc(100vw - var(--lw) * .74); bottom:calc(env(safe-area-inset-bottom, 0px) + 2vh); }
}
@media (prefers-reduced-motion:reduce){
  .valikko::before, body[data-valikko] .valikko::before{ transition:none; rotate:-8deg; scale:1; }
}
/* Ä/Ö-pisteet eivät leikkaudu pillerin linkeissä (Jenna 26.10.2026):
   kutistusanimaatio tarvitsee vain vaakasuuntaisen rajauksen. */
.palkki__l{ overflow:visible; overflow-x:clip; overflow-y:visible; }

/* VÄHEMMÄN LIIKETTÄ (Jenna 26.10.2026): Made with -rivillä vain ensimmäinen
   vaihtuva sana (Intelligence), ja footer tasaisen punaisena ilman
   kursorireikää (nestekangas ei aja). */
@media (prefers-reduced-motion:reduce){
  .made__vs:not(:first-child){ visibility:hidden; }
  .footer{ background:var(--puna) !important; }
  .footer__kuva, .footer__neste{ display:none !important; }
}