/* ============================================================
   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;   /* art of branding */

  /* 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:'Rockids','Rockids Fallback',Impact,sans-serif;
  --f-kasi:   'Hesteria','Hesteria Fallback',cursive;
  --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. */
.leima-oikea{
  position:fixed; top:var(--reuna); right:var(--reuna); z-index:70;
  color:var(--musta); pointer-events:none;
}

.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:none; }

/* ============================================================
   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{
  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);
}

/* 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. */
.hero__alaote{
  font-family:var(--f-kasi); color:var(--hiekka);
  line-height:1; margin:0; position:relative; z-index:2;
  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; }
.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-display); 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; perspective:11.72em; }
.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; }

/* Vaimennus on vara sille ettei rullaa rakenneta: ilman JS:ää tai
   vähennetyllä liikkeellä. Rullan kanssa se ei saa laueta. */
.palkki__l:hover{ opacity:.68; }
.palkki__l:has(.rulla):hover{ opacity:1; }

/* 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-display); font-weight:400;
  letter-spacing:.02em; line-height:1.2;
  text-transform:uppercase; white-space:nowrap;
  max-width:0; opacity:0; overflow:hidden;
  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); color:var(--puna);
  font-size:clamp(14px,1.5vw,23px); line-height:1;
}
@media (prefers-reduced-motion:reduce){ .leima__kierto{ animation:none; } }

/* ============================================================
   2. MADE WITH — koko ruutu, blob tekstin päällä
   ============================================================ */
.made{
  position:relative; min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr;
  padding:var(--reuna) 0; overflow:clip;
}
.made__yla{ display:flex; justify-content:space-between; align-items:flex-start;
  padding-inline:var(--reuna); }
/* Vasen liehu: teksti alkaa reunasta, oikea reuna jää rosoiseksi. */
.made__keski{
  position:relative; display:grid;
  align-content:center; justify-items:start;
  padding-inline:var(--reuna);
}
.made__vaite{
  position:relative; z-index:1; margin:0;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; text-align:center;
  line-height:.92; letter-spacing:-.02em;
  text-align:left;
  /* Sama väri kuin nesteen varjostimessa (uUlkoTeksti) — nämä kaksi
     pitää muuttaa yhdessä, muuten canvas-vara näyttää eriävältä. */
  color:var(--musta);
  font-size:clamp(3rem,12.5vw,13rem);
}
/* Kaksi riviä, ei rivitys leveyden mukaan: "Made with" / "human intuition". */
.made__vaite .rivi{ display:block; }
/* Kirjaimet erikseen, jotta scrollimorfi voi häiväyttää muut ja
   siirtää H:n ja I:n keskelle. inline-block, jotta transform puree. */
.made__vaite .kirjain{ display:inline-block; }
.made__vaite .kirjain--vali{ width:.26em; }

/* Punainen tulva morfin aikana. */
.made__puna{
  position:absolute; inset:0; background:var(--puna);
  opacity:0; pointer-events:none; z-index:3;
}
/* Kerrosjärjestys: teksti on normaalisti musteen ALLA, jotta nouseva
   punainen peittää sen ja canvas maalaa kirjaimet kermalla päälle.
   Morfin ajaksi teksti nousee päällimmäiseksi, koska silloin canvas on
   pois ja kirjaimia liikutellaan HTML-puolella. */
.made__vaite{ z-index:1; }
.made.morfaa .made__vaite{ z-index:4; }

/* Nouseva muste. Ei omaa animaatiota — piirtyy vain scrollatessa,
   jolloin osio on levollinen kun sitä luetaan. */
.made__nousu{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}
/* Nestesimulaatio piirtää myös tekstin, joten HTML-kopio piiloon —
   mutta vain visibilityllä, jotta se pysyy ruudunlukijalle ja hauille. */
.made.neste .made__vaite{ visibility:hidden; }
/* Morfin ajaksi HTML-teksti esiin canvasin tilalle, punaisen päälle.
   TÄMÄN ON OLTAVA neste-säännön JÄLKEEN: sama tarkkuus, järjestys
   ratkaisee. */
.made.neste.morfaa .made__vaite,
.made.morfaa .made__vaite{ visibility:visible; }
/* Muoto on tekstin PÄÄLLÄ ja peittää koko osion, jotta se voi kulkea
   vapaasti kursorin mukana. Ei SVG-goota: muoto piirretään yhtenä
   orgaanisena käyränä, jolloin canvasissa voi tehdä myös tekstin
   värinkäännön (source-atop). Suodin sotkisi kirjainten reunat. */
.made__blob{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}

/* ============================================================
   3. HI — punainen kaista, jättimäinen HI
   ============================================================ */
/* HI-ruutu elää MADE-osion sisällä morfin lopputilana. Sillä ei ole
   omaa scrollipituutta: kun HI on isona, seuraava vieritys vie jo
   seuraavaan osioon. */
.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;
  /* transform tekee tästä kiinnitettyjen lapsien sijaintikehyksen, joten
     kiinnitetty HI vierii pois osion mukana eikä jää roikkumaan ruutuun. */
  transform:translateY(0);
  /* Ei siirtymää: luovutus morfilta tälle kerrokselle on hetkellinen ja
     geometria on sama, joten vaihtoa ei näe. Siirtymä sen sijaan
     näkyisi välähdyksenä juuri kun H ja I asettuvat paikoilleen. */
}
.hi-taso .hi__yla{ display:flex; justify-content:space-between; padding-inline:var(--reuna); }
.hi-taso .hi__keski{ position:relative; display:grid; place-items:center; }
/* HI JÄÄ RUUTUUN. Otsikko on kiinnitetty ruudun keskelle ja näkyy
   morfin päätyttyä aina siihen asti kunnes osio on vieritetty ohi.
   Kiinnitys, ei sticky: morfi päättyy kun edellinen osio on vielä
   pinnattuna, joten otsikon on voitava olla ruudussa jo silloin.
   --oikaisu siirtää MUSTEEN keskelle, ei laatikon. */
.hi__hi{
  position:fixed; left:50%; top:50%;
  translate:-50% calc(-50% + var(--oikaisu, 0px));
  color:var(--kerma); z-index:5; line-height:.74;
  /* Näkyvyyttä säätää .hi-taso, jonka sisällä tämä on. */
  pointer-events:none; white-space:nowrap;
}
.hi__teksti{
  position:absolute; z-index:3; max-width:30ch; color:var(--kerma);
  font-size:clamp(11px,.8vw,13px);
}
.hi__teksti--v{ left:var(--reuna); top:12%; }
.hi__teksti--o{ right:var(--reuna); bottom:10%; text-align:right; }

.jalki{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.jalki__k{
  position:absolute; width:clamp(110px,12vw,210px); aspect-ratio:3/4;
  translate:-50% -50%; opacity:0;
  /* Harmaa ei erotu punaisesta. Vaalea kuvapaikka lukeutuu kortiksi.
     VÄLIAIKAINEN: tähän tulevat oikeat kuvat. */
  background:var(--kerma-2);
  box-shadow:0 0 0 1px rgba(25,25,25,.10);
}

/* ============================================================
   4. REFERENSSIT
   ============================================================ */
.refet{ position:relative; padding:clamp(56px,8vw,130px) 0; overflow:clip; }
.refet__yla{ display:flex; justify-content:space-between; padding-inline:var(--reuna); }
.refet__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. */
.refet__nimet{ text-align:center; position:relative; z-index:1; font-size:14vw; }
.refet__n{
  font-family:var(--f-display); 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;
}

/* KUVAT
   Keskellä, vinossa, vaalea kehys ja kehyksen alareunassa asiakkaan nimi.
   Kehys on kortin oma tausta; kuva on sen sisällä ja nimi jää alareunan
   levempaan marginaaliin — kuten valokuvavedoksessa. */
.refet__kuvat{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.refet__kuva{
  /* Katto myös ruudun korkeudesta: 3:4-kuva + kehys ~37 % ruudusta. */
  position:absolute; width:clamp(150px,min(14vw,30vh),300px);
  background:var(--kerma);
  padding:clamp(7px,.8vw,12px) clamp(7px,.8vw,12px) clamp(22px,2.2vw,34px);
  box-shadow:0 0 0 1px rgba(25,25,25,.10);
  /* NÄKYVISSÄ oletuksena. Paljastusanimaatio asettaa alkutilan itse
     (gsap.fromTo), joten opacity:0 täällä piilottaisi kuvat pysyvästi
     silloin kun animaatiota ei aja: ei JS:ää, tai käyttäjä on pyytänyt
     vähemmän liikettä. */
}
.refet__kuva .kuvapaikka{
  display:grid; place-items:center;
  width:100%; aspect-ratio:3/4; background:var(--harmaa);
}
.refet__kuva .kuvapaikka svg{ width:clamp(20px,2vw,34px); color:var(--kerma-2); }
.refet__kuva figcaption{
  position:absolute; left:0; right:0; bottom:clamp(6px,.7vw,11px); text-align:center;
  font-family:var(--f-mono); font-size:clamp(7px,.62vw,10px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--musta);
}

/* Ympyröidyt palvelut leiskan tapaan. */
.ympyra{
  position:absolute; z-index:3;
  font-family:var(--f-kasi); color:var(--musta);
  font-size:clamp(1.2rem,2.4vw,2.2rem); white-space:nowrap;
  padding:.35em 1em;
}
.ympyra::before{
  content:''; position:absolute; inset:-.05em -.15em;
  border:2px solid var(--musta); border-radius:50%;
  rotate:-5deg;
}

/* ============================================================
   5. ABOUT
   ============================================================ */
.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:auto 1fr; gap:clamp(20px,4vw,70px); align-items:start; }
.about__otsikko{
  font-family:var(--f-display); font-weight:400; color:var(--puna); text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,8rem); line-height:.86;
  writing-mode:vertical-rl; rotate:180deg;
}
.about__teksti{ max-width:60ch; display:grid; gap:1em; }
.about__kuva{ background:var(--harmaa); aspect-ratio:16/6; margin-top:clamp(18px,3vw,40px); }

/* ============================================================
   6. FOOTER — punainen pyyhkäisy alhaalta, kursori paljastaa kuvan
   ============================================================ */
.footer{
  position:relative; min-height:100dvh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto auto; background:var(--kerma);
}
.footer__kuva{ position:absolute; inset:0; background:var(--harmaa); z-index:1; }
/* Punainen taso on canvas: nestesimulaatio syö siihen reikää kursorin
   mukana ja alta paljastuu kuva. Pystysuuntainen liukuväri on CSS-maski
   canvasin päällä — punainen alkaa vasta alaosasta, kuten leiskassa. */
.footer__neste{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(to top, #000 52%, rgba(0,0,0,.92) 66%, transparent 92%);
          mask-image:linear-gradient(to top, #000 52%, rgba(0,0,0,.92) 66%, transparent 92%);
}

.footer__sisalto{
  position:relative; z-index:3; display:flex; justify-content:space-between;
  align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding:var(--reuna) var(--reuna) 0; color:var(--kerma);
}
.footer__lista{ display:grid; gap:.15em; }
.footer__lista a{ font-family:var(--f-mono); font-size:clamp(9px,.7vw,11px);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.footer__nimi{ position:relative; z-index:3; color:var(--kerma); padding-bottom:.02em; }

/* ============================================================
   VALIKKO — koko ruudun korkuinen palsta keskellä (leiska-02)
   ============================================================ */
.vari{
  position:fixed; inset:0; z-index:80; background:rgba(25,25,25,.45);
  opacity:0; visibility:hidden;
  transition:opacity 320ms linear, visibility 0s linear 320ms;
}
/* Leiskassa palsta ulottuu reunasta reunaan pystysuunnassa ja on noin
   37 % ruudun leveydestä. Rivit täyttävät palstan leveyden ja jakavat
   korkeuden tasan, joten määrän muuttuessa mitoitus säilyy. */
.valikko{
  position:fixed; z-index:81; left:50%; top:0; translate:-50% 0;
  width:clamp(300px, 37vw, 880px); height:100dvh;
  display:grid; grid-template-rows:auto 1fr; overflow:auto;
  background:var(--puna); color:var(--kerma);
  padding:clamp(20px,3.2vh,44px) 0 clamp(20px,3.2vh,44px);
  opacity:0; visibility:hidden; scale:.98;
  transition:opacity 280ms linear, scale 420ms var(--e), visibility 0s linear 420ms;
}
.valikko ul{ display:grid; grid-auto-rows:1fr; align-content:stretch; }
body[data-valikko] .vari{ opacity:1; visibility:visible; transition-delay:0s; }
body[data-valikko] .valikko{ opacity:1; visibility:visible; scale:1; transition-delay:0s; }

.valikko__otsikko{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; text-align:center;
  font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1;
  margin-bottom:clamp(16px,4vh,56px);
}
/* Rivi täyttää palstan reunasta reunaan, hiusviiva erottaa. Ei
   pyöristystä eikä sisämarginaalia: leiskassa rivit ovat kaistoja. */
.valikko__l{
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding-inline:clamp(14px,1.6vw,24px);
  border-top:1px solid rgba(25,25,25,.22);
  transition:background 250ms, color 250ms;
}
.valikko li:last-child .valikko__l{ border-bottom:1px solid rgba(25,25,25,.22); }
.valikko__l:hover{ background:var(--kerma-2); color:var(--musta); }
.valikko__l.nyt{ background:var(--musta); color:var(--puna); border-color:transparent; }
.valikko__l.nyt + .valikko__l{ border-top-color:transparent; }
.valikko__nimi{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  /* Mitattu: versaali-Ä nousee 0.837 em perusviivasta. line-height:1.06
     jättää rivin yläreunaan vain 0.83 em, ja .valikko li{overflow:hidden}
     (paljastusanimaatio) leikkasi pisteet. 1.2 antaa 0.90 em. */
  font-size:clamp(1.8rem,5.4vh,3.4rem); line-height:1.2;
}
.valikko__nro{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; opacity:.55; }
.valikko li{ overflow:hidden; display:grid; }
.valikko li > a{ translate:0 110%; transition:translate 520ms var(--e); }
body[data-valikko] .valikko li > a{ translate:0 0; }
.valikko li:nth-child(1)>a{transition-delay:60ms}.valikko li:nth-child(2)>a{transition-delay:110ms}
.valikko li:nth-child(3)>a{transition-delay:160ms}.valikko li:nth-child(4)>a{transition-delay:210ms}
.valikko li:nth-child(5)>a{transition-delay:260ms}.valikko li:nth-child(6)>a{transition-delay:310ms}
.valikko li:nth-child(7)>a{transition-delay:360ms}
body:not([data-valikko]) .valikko li>a{ transition-delay:0ms }
.valikko__sulje{
  position:absolute; right:10px; top:10px; width:34px; height:34px;
  border:2px solid currentColor; border-radius:999px; font-size:15px; line-height:1;
}

/* 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){
  .about__grid{ grid-template-columns:1fr; }
  .about__otsikko{ writing-mode:horizontal-tb; rotate:none; }
  .ympyra{ display:none; }
  .hi__teksti{ position:static; max-width:none; margin-top:1.5em; text-align:left; }
  .hi__keski{ align-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .made__blob,.jalki{ display:none; }
  .refet__kuva{ opacity:1; translate:0 0; position:relative;
    margin:16px auto; width:min(230px,60vw); }
  .refet__kuvat{ position:static; }
  .footer__puna{ -webkit-mask-image:linear-gradient(to top,#000 52%,transparent 92%);
    mask-image:linear-gradient(to top,#000 52%,transparent 92%); }
}