/* ============================================================
   SSH STUDIOS
   ------------------------------------------------------------
   Rakennettu viiden lehtireferenssin pohjalta.
   Neljä väriä, yksi kirjaintyyppi, ei mitään muuta.

   VÄRIT: muuta hex-koodi :root-kohdassa, se päivittyy kaikkialle.
   ============================================================ */

:root{
  --white:#FFFFFF;
  --pink:#EDA8BF;        /* näytteistetty suoraan referenssistä */
  --hot:#FA86BD;         /* sama pinkki kuin spraymaalatussa otsikossa */
  --red:#C2183E;         /* tummempi punainen */
  --black:#000000;

  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Liikkeen kayrat. Selaimen omat ease-arvot ovat liian laimeita,
     joten kaytetaan voimakkaampia. ease-in on kielletty: se
     aloittaa hitaasti ja saa kayttoliittyman tuntumaan jahmealta. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  --gut:clamp(1.25rem,4vw,3.5rem);
  --sec:clamp(4rem,11vw,9rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;background:var(--white);color:var(--black);
  font-family:var(--font);font-weight:400;font-size:16px;line-height:1.45;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--hot);color:var(--white)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.skip{position:absolute;left:-9999px;background:var(--black);color:var(--white);padding:.75rem 1.25rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(1500px,100% - (var(--gut)*2));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   TYPOGRAFIA
   Vain kaksi rekisteriä: valtavan paksu, tai pieni ja asiallinen.
   Ei mitään siltä väliltä.
   ============================================================ */

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.86}

/* Referensseissä tyyppi täyttää sivun laidasta laitaan.
   Siksi koot ovat vw-pohjaisia, eivät pistekokoja. */
.huge{font-size:clamp(4.5rem,20vw,22rem);font-weight:800;letter-spacing:-.05em;line-height:.80}
/* .fit: js/site.js laskee koon niin etta rivi tayttaa palstan */
.fit{white-space:nowrap}
.fit br{white-space:normal}
.big {font-size:clamp(3rem,13vw,13rem);  font-weight:800;letter-spacing:-.045em;line-height:.85}
.mid {font-size:clamp(2rem,6.5vw,5.5rem);font-weight:800;letter-spacing:-.035em;line-height:.92}

.micro{
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;
}
.body{font-size:15px;line-height:1.55;max-width:46ch}
.body--tight{font-size:13px;line-height:1.5;max-width:40ch}

.red{color:var(--hot)}

/* Nostolainaus. Pinkki, ja isompi kuin leipateksti - pinkki on
   vaalea, joten pieni koko tekisi siita vaikeasti luettavan. */
.pullquote{
  color:var(--hot);
  font-size:clamp(1.15rem,2.2vw,1.65rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  max-width:24ch;
}
.hotpink{color:var(--hot)}

/* ============================================================
   NAVIGAATIO
   ============================================================ */

.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:1.1rem 0;
}
.nav__mark{font-size:15px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.nav__links{display:flex;gap:clamp(.8rem,2vw,1.8rem);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav__links a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nav__links a[aria-current="page"]{color:var(--hot)}
@media (hover:hover) and (pointer:fine){ .nav__links a:hover{color:var(--hot)} }

/* pinkillä pohjalla navi kääntyy mustaksi kuten referensseissä */
.sheet--pink .nav__links a[aria-current="page"],
@media (hover:hover) and (pointer:fine){ .sheet--pink .nav__links a:hover{color:var(--white)} }

/* ============================================================
   ARKIT
   Sivu on pinkkejä ja valkoisia arkkeja peräkkäin, kuten
   lehden aukeamat.
   ============================================================ */

.sheet{position:relative;padding-block:var(--sec)}
.sheet--white{background:var(--white);color:var(--black)}
.sheet--pink {background:var(--pink); color:var(--black)}
.sheet--black{background:var(--black);color:var(--white)}
.sheet--black .micro{color:var(--white)}

/* ============================================================
   VUOSILUKU
   2026 kulkee pystyssa koko pinkin alueen korkeudelta.
   Se on absoluuttisesti asemoitu, joten se ei vaikuta
   sisallon sijaintiin - ja js/site.js laskee sen koon
   mittaamalla, jotta se ylettyy ylhaalta alas asti.
   ============================================================ */

.yearsheet{position:relative;overflow:hidden}

.year{
  margin:0;font-weight:800;letter-spacing:-.06em;line-height:.85;
  font-size:clamp(5rem,20vw,16rem);
}

@media (min-width:900px){
  .year{
    position:absolute;
    right:max(var(--gut), calc((100% - 1500px) / 2));
    top:0;bottom:0;
    writing-mode:vertical-rl;
    display:flex;align-items:center;
    pointer-events:none;
    margin:0;
  }
  /* sisallolle tilaa vuosiluvun vierelta */
  /* Kaista vuosiluvulle. Leveys maaraa kuinka isoksi luku
     voi kasvaa, ja siten kuinka pitkalle se ylettyy. */
  .yearsheet__body{padding-right:clamp(9rem,27vw,26rem)}
}

.yearsheet__intro{max-width:44ch}
.yearsheet__body > .newworks{margin-top:clamp(2rem,5vw,4rem)}

/* ============================================================
   © MERKKI
   Iso ympyröity C ja nimi sen alla, kuten lehden kannessa.
   ============================================================ */

.copymark{display:inline-block;text-align:center;line-height:1}
/* Etusivun merkki on pienempi ja istuu CHAOS-sanan C:n alle,
   siksi se on vasempaan reunaan tasattu eika keskitetty. */
.copymark--small{align-self:flex-start;text-align:left;margin-top:.15em}
/* @-merkki ja tunnus samalla rivilla */
.copymark--row{display:inline-flex;align-items:baseline;gap:.04em}
.copymark--row{max-width:100%}
.copymark--row .copymark__c{font-size:clamp(3rem,9vw,7rem)}
.copymark--row .copymark__name{display:inline;margin-top:0;
  font-size:clamp(1.4rem,4.2vw,3.2rem);word-break:break-word}
.copymark--small .copymark__c{font-size:clamp(2.6rem,7vw,6.5rem)}
.copymark__c{
  font-size:clamp(5.5rem,18vw,16rem);
  font-weight:800;line-height:.78;display:block;
}
.copymark__name{
  display:block;margin-top:.15em;
  font-size:clamp(1.8rem,6vw,4.6rem);
  font-weight:800;letter-spacing:-.035em;text-transform:uppercase;
}

/* ============================================================
   KUVA JOKA VUOTAA REUNASTA
   ============================================================ */

/* Kansi: kuva vuotaa laidasta, tyyppi vieressa. */
.cover{
  display:grid;gap:clamp(1rem,3vw,2.5rem);
  grid-template-columns:1fr;
  --heroH:clamp(30rem,86vh,60rem);
  align-items:stretch;                 /* kuvapalsta venyy koko korkeuteen */
  min-height:var(--heroH);
  padding-block:0;
}
/* teksti keskittyy pystysuunnassa kuvapalstan rinnalla */
.cover__type{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2rem,5vw,4rem);
  position:relative;
}
/* Spraymaalattu tunnus valkoisen palstan ylanurkassa, kuvarullan
   vieressa. Asemoidaan absoluuttisesti, jotta otsikko pysyy
   pystysuunnassa keskella niin kuin ennenkin. */
.logo-spray{
  width:clamp(120px,32vw,190px);
  height:auto;
  margin-bottom:clamp(.75rem,3vw,1.25rem);
}
/* Leveassa naytossa tunnus nostetaan palstan ylanurkkaan, jotta
   otsikko pysyy pystysuunnassa keskella niin kuin ennenkin. */
@media (min-width:820px){
  .logo-spray{
    position:absolute;
    top:clamp(1.25rem,3.5vw,2.5rem);
    left:0;
    width:clamp(130px,13vw,200px);
    margin-bottom:0;
  }
}
@media (min-width:820px){
  .cover{grid-template-columns:minmax(160px,24vw) 1fr}
  .cover--slim{grid-template-columns:minmax(120px,17vw) 1fr}
  .cover--right{grid-template-columns:1fr minmax(160px,24vw)}
  /* Instagram-osiossa kuva on paaosassa, teksti sen rinnalla */
  .cover--big.cover--right{grid-template-columns:1fr minmax(320px,46vw)}
  .cover--right .cover__photo{order:2}
}
/* kapealla ruudulla kuva vuotaa molemmista laidoista */
.cover__photo{margin-inline:calc(var(--gut) * -1)}
@media (min-width:820px){ .cover__photo{margin-inline:calc(var(--gut) * -1) 0} }
@media (min-width:820px){ .cover--right .cover__photo{margin-inline:0 calc(var(--gut) * -1)} }
.cover__photo img{width:100%;height:auto}

/* Pystyrulla. Korkea palsta, jossa kuvat kiertävät hitaasti alaspäin.
   Kuvalista on sivulla kahteen kertaan, ja rata siirtyy tasan yhden
   sarjan verran - siksi kierto ei nyki kohdassa jossa se alkaa alusta. */
.roll{
  position:absolute;inset:0;
  overflow:hidden;
}
@media (max-width:819px){
  /* kapealla ruudulla rulla on sisallon ylla, joten maltillisempi korkeus */
  .cover{--heroH:clamp(22rem,56vh,32rem)}
}
.roll__track{
  display:block;
  /* Kesto suhteessa kuvien maaraan: yhdeksan kuvaa vaatii pidemman
     kierroksen, jotta vieritysnopeus pysyy samana kuin kuudella. */
  animation:roll 90s linear infinite;
  will-change:transform;
}
.roll__track img{width:100%;height:auto;display:block}

@keyframes roll{
  from{transform:translateY(-50%)}
  to  {transform:translateY(0)}
}

/* Jos liike haittaa, rulla pysähtyy ja näyttää yhden kuvan. */
@media (prefers-reduced-motion:reduce){
  .roll__track{animation:none;transform:none}
}
.cover__type{min-width:0}

/* ------------------------------------------------------------
   ETUSIVUN KANSI
   Kuvarulla alkaa aivan sivun ylareunasta. Siksi navigaatio
   kelluu sisallon paalla ja tunnus on piilotettu - muuten se
   jaisi kuvan paalle lukukelvottomaksi. Iso BORN FROM CHAOS
   hoitaa tunnistettavuuden.
   ------------------------------------------------------------ */

@media (min-width:820px){
  /* Hero tayttaa koko ikkunan: ensinakymassa on vain valkoista,
     ja pinkki alkaa tasan taitteen alapuolelta.
     dvh ottaa huomioon puhelimen selainpalkit, vh on varalla. */
  .home .cover{
    --heroH:100vh;
    --heroH:100dvh;
    min-height:100vh;
    min-height:100dvh;
  }

  .home .site-head{
    position:absolute;top:0;left:0;right:0;
    width:auto;max-width:none;margin:0;
    padding-inline:max(var(--gut), calc((100% - 1500px) / 2));
    z-index:5;
  }
  .home .site-head .nav{justify-content:flex-end}
  .home .site-head .nav__mark{display:none}
  .home .cover__type{padding-top:clamp(4.5rem,9vw,7rem)}
}

/* enemman ilmaa tunnuksen alle ennen pinkkia */
.home .cover__type{padding-bottom:clamp(5rem,12vw,9rem)}

/* Kuvapalsta venyy rivin korkeuteen, ja rulla asemoidaan sen sisaan
   absoluuttisesti. Nain se rajautuu oikein riippumatta siita kuinka
   korkeaksi rivi kasvaa - height:100% ei toimisi, koska rivin korkeus
   maaraytyy sisallosta. */
.cover__photo{position:relative;min-height:var(--heroH)}

/* ============================================================
   SPRAYMAALATTU OTSIKKOKUVA
   ============================================================ */

/* THE MESS -otsikko.
   Valtava spraymaalaus joka kallistuu ja menee edellisen osion
   (SOTKU JOSTA TULEE JOTAIN KAUNISTA) tekstin paalle.

   Taustaa EI aseteta: osio on lapinakyva, jotta alla oleva teksti
   nakyy. Tausta tulee bodysta, joka on valkoinen.
   Ei myoskaan z-indexia - se loisi pinoamiskontekstin ja estaisi
   mix-blend-moden toiminnan alla olevaa osiota vasten. Pelkka
   position:relative (.sheet) riittaa nostamaan kuvan tekstin ylle. */
.sheet--mess{
  margin-top:clamp(-6rem,-8vw,-2rem);     /* kapealla ruudulla vain kevyt limitys */
  padding-top:0;
  padding-bottom:clamp(2rem,5vw,5rem);    /* tilaa kallistuneille kulmille */
}
/* Leveassa naytossa otsikko ja leipateksti ovat vierekkain, jolloin
   spray voidaan vetaa reilusti SOTKU-otsikon paalle. Kapealla
   ruudulla sama veto osuisi leipatekstiin, joten se pidetaan pienena. */
@media (min-width:880px){
  .sheet--mess{margin-top:clamp(-36rem,-29vw,-10rem)}
}

/* Kuvassa ei ole lapinakyvyytta vaan valkoinen tausta. multiply
   tekee valkoisesta nakymattoman, jolloin vain maali jaa nakyviin
   ja alla oleva teksti kuultaa lapi. */
.spraytitle{
  display:block;margin:0 auto;
  width:auto;max-width:94%;
  max-height:clamp(26rem,82vh,52rem);   /* kuva on pystymallinen, korkeus ratkaisee */
  height:auto;
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Etusivulla sama kuva on jattimainen ja kallellaan.
   Leveys korkeintaan 92vw: kallistus levittaa kuvaa noin 12 %,
   ja kuvassa on vain 2,5 % tyhjaa reunaa, joten tata leveampana
   kirjaimet leikkautuisivat sivuilta. */
.sheet--mess .spraytitle{
  width:min(92vw,1200px);
  max-width:none;
  max-height:none;
  transform:rotate(-5deg);
}

/* ============================================================
   2026
   Kuvat kokonaisina, ei rajausta. Eri kokoisia rinnakkain.
   ============================================================ */

/* Tiivis ruudukko: kuvat istuvat lahella toisiaan. */
.newworks{
  display:grid;gap:clamp(.25rem,.7vw,.6rem);
  grid-template-columns:repeat(2,1fr);
}
/* Kolme saraketta riittaa: kuusi kuvaa asettuu kahdelle riville
   ja yksittainen kuva on isompi kuin neljan sarakkeen ruudukossa. */
@media (min-width:760px){ .newworks{grid-template-columns:repeat(3,1fr)} }
/* Sama muoto kaikille, jotta rivit ovat suorassa. */
.newworks img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  display:block;cursor:zoom-in;
  transition:opacity .18s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .newworks img:hover{opacity:.92} }
/* ============================================================
   TAULUT
   ============================================================ */

.works{
  display:grid;gap:clamp(1.5rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
.work{margin:0;position:relative}

/* MYYTY-leima. Sama kirjaintyyppi kuin muualla sivustolla,
   punaisella, kuvan paalla. Kuva tummenee hieman, jotta teksti
   erottuu myos vaaleista tauluista. */
.sold{
  position:absolute;left:0;right:0;top:0;
  height:100%;
  display:grid;place-items:center;
  z-index:2;pointer-events:none;
  font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.6rem,4.4vw,3.4rem);
  color:var(--red);
  text-shadow:0 2px 14px rgba(255,255,255,.75);
}
.work--sold .work__img{filter:brightness(.93) saturate(.9)}
/* leima kattaa vain kuvan, ei kuvatekstia */
.work--sold .sold{height:auto;aspect-ratio:1/1}
/* Kaikki ruudut samanmuotoisia, mutta contain eika cover:
   taulu nakyy kokonaan, sita ei rajata eika venyteta. Jos kuva
   on eri muotoinen, ylla tai sivuilla on vain tyhjaa. */
.work__img{
  width:100%;
  /* Kuvat ovat kahta muotoa: 3:4 pysty ja 4:3 vaaka. Nelio on
     naiden tarkka keskitie - molemmista rajautuu 25 %, eika
     kumpikaan jaa toista pienemmaksi. */
  aspect-ratio:1/1;
  object-fit:cover;
  background:transparent;
  cursor:zoom-in;transition:opacity .18s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .work:hover .work__img{opacity:.8} }

.work__cap{padding-top:.6rem;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.6}
.work__t{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;
  text-transform:none;margin-bottom:.15rem}
/* Nimeton taulu nayttaa numeronsa - pienella, kuten muutkin
   kuvatekstin rivit, jotta se ei nayta nimelta. */
.work__t--num{font-size:11px;font-weight:600;letter-spacing:.12em;margin-bottom:0}
.tag{display:inline-block;margin-top:.3rem;color:var(--hot)}
.tag--sold{color:var(--black);opacity:.45}

/* ============================================================
   TAULUPARIT
   ============================================================ */

/* Parit ovat isompia kuin yksittaiset taulut mutta eivat vie koko
   leveytta: max-width pitaa ne noin puolitoistakertaisina taulun
   ruutuun verrattuna. */
.pairs{
  display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:1fr;
  margin-top:clamp(1rem,2.5vw,2rem);
  max-width:900px;
}
@media (min-width:700px){ .pairs{grid-template-columns:1fr 1fr} }
.pair{margin:0}
.pair img{width:100%;height:auto;cursor:zoom-in;transition:opacity .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .pair:hover img{opacity:.82} }
.pair figcaption{padding-top:.6rem;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.6}

/* ============================================================
   KUVAKOLLAASI
   Kuvat kokonaisina, omissa mittasuhteissaan. Ei rajausta,
   ei venytystä, ei välejä.
   ============================================================ */

.collage{width:100vw;margin-inline:calc(50% - 50vw);columns:1;column-gap:0}
@media (min-width:700px){  .collage{columns:2} }
@media (min-width:1150px){ .collage{columns:3} }
.collage img{display:block;width:100%;height:auto;margin:0;
  break-inside:avoid;cursor:zoom-in}
@media (hover:hover) and (pointer:fine){ .collage img:hover{opacity:.88} }

/* ============================================================
   LINKIT JA PAINIKKEET
   ============================================================ */

.link{
  display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
@media (hover:hover) and (pointer:fine){ .link:hover{color:var(--hot)} }
.loadmore{background:none;border:0;cursor:pointer;font-family:var(--font);
  display:block;margin:3rem auto 0}

/* ============================================================
   SUURENNOS
   Kuva tayttaa nayton niin pitkalle kuin mahtuu. Kuvateksti
   on kapea nauha alareunassa, ei oma lohkonsa - muuten se
   veisi tilaa itse kuvalta.
   ============================================================ */

.lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.96);
  display:none;place-items:center;padding:0;
}
.lightbox.is-open{display:grid}

.lightbox__inner{
  width:100%;height:100%;
  display:grid;grid-template-rows:1fr auto;
  justify-items:center;align-items:center;
  padding:clamp(.5rem,1.6vw,1.25rem);
  padding-bottom:clamp(3rem,7vh,5rem);
  gap:.75rem;
}
.lightbox__img{
  max-width:100%;
  max-height:calc(100vh - clamp(5rem,12vh,8rem));
  width:auto;height:auto;object-fit:contain;
}
.lightbox__cap{
  color:var(--white);text-align:center;font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.7;
}
.lightbox__cap .work__t{color:var(--white);font-size:1.2rem}
.lightbox__cap .work__t--num{font-size:.95rem}
.lightbox__cap p{margin:.5rem 0 0}

.lightbox__close,.lightbox__nav{
  position:absolute;background:var(--white);color:var(--black);
  border:0;width:2.8rem;height:2.8rem;font-size:1.1rem;cursor:pointer;
  display:grid;place-items:center;font-family:var(--font);font-weight:700;z-index:2;
}
.lightbox__close{top:1rem;right:1rem}
.lightbox__nav--prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:1rem;top:50%;transform:translateY(-50%)}
@media (hover:hover) and (pointer:fine){
  .lightbox__close:hover,.lightbox__nav:hover{background:var(--hot);color:var(--white)}
}
body.no-scroll{overflow:hidden}

/* ============================================================
   ALATUNNISTE
   ============================================================ */

.footer{background:var(--black);color:var(--white);padding-block:clamp(3rem,7vw,5rem)}
@media (hover:hover) and (pointer:fine){ .footer a:hover{color:var(--hot)} }
.footer__grid{display:grid;gap:2.5rem}
@media (min-width:780px){.footer__grid{grid-template-columns:2fr 1fr 1fr}}
.footer h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;opacity:.5;margin:0 0 .9rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:13px}
.footer__fine{margin-top:3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.2);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}

/* ============================================================
   APULUOKAT
   ============================================================ */

.stack > * + *{margin-top:1.1rem}
.center{text-align:center}
.mt{margin-top:clamp(1.5rem,4vw,3rem)}
.split{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
@media (min-width:880px){.split{grid-template-columns:1fr 1fr}}
.todo{background:#FFE95C;padding:0 .25em;border-bottom:2px dotted var(--black)}
.empty-note{padding:2.5rem;border:2px dashed var(--black);text-align:center;font-weight:600}

/* ============================================================
   JOULUKIRJE (vain Taulut-sivulla)
   Kirjekuori tipahtaa ylhaalta sivun auettua. Klikkaus avaa
   kirjeen. Koko palan voi poistaa yhdella kertaa: tama lohko,
   works.html:n kirje-markup ja js/letter.js.
   ============================================================ */

.drop{
  position:fixed;
  top:clamp(3rem,9vw,4.5rem);      /* js/letter.js tarkentaa taman
                                      valikon todellisen korkeuden mukaan */
  left:50%;
  transform:translateX(-50%);
  z-index:900;                     /* nav on alle, suurennos (1000) yli */
  display:grid;
  justify-items:center;
  gap:.5rem;
  padding-top:clamp(.75rem,2vw,1.5rem);
}
/* display:grid yllattaisi hidden-attribuutin, joten piilotus
   sanotaan erikseen. */
.drop[hidden]{display:none}

.drop__env{
  display:block;
  width:clamp(104px,16vw,160px);
  padding:0;border:0;background:none;
  cursor:pointer;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.22));
  animation:kirje-tipahtaa .85s cubic-bezier(.2,.9,.25,1.4) both;
  transition:transform .18s var(--ease-out);
}
.drop__env svg{display:block;width:100%;height:auto}
.drop__env:focus-visible{transform:scale(1.05) rotate(-2deg)}
@media (hover:hover) and (pointer:fine){
  .drop__env:hover{transform:scale(1.05) rotate(-2deg)}
}

/* Pieni ohita-linkki kuoren alla, jotta kirjeen voi sulkea
   avaamatta sita. */
.drop__skip{
  border:0;cursor:pointer;
  font-family:var(--font);
  font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--black);
  /* valkoinen tausta, koska kuori voi tipahtaa ison mustan
     otsikon paalle - muuten teksti katoaisi siihen */
  background:var(--white);
  padding:.45rem .7rem;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  animation:kirje-tipahtaa .85s .12s cubic-bezier(.2,.9,.25,1.4) both;
}
@media (hover:hover) and (pointer:fine){ .drop__skip:hover{color:var(--hot)} }

@keyframes kirje-tipahtaa{
  0%  {transform:translateY(-240%) rotate(-10deg);opacity:0}
  70% {opacity:1}
  100%{transform:translateY(0) rotate(0);opacity:1}
}

/* ---------- itse kirje ---------- */

.letter{
  position:fixed;inset:0;z-index:1100;
  display:none;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);
  background:rgba(0,0,0,.55);
}
.letter.is-open{display:grid}

.letter__paper{
  position:relative;
  width:min(100%,560px);
  max-height:88vh;overflow:auto;
  background:var(--white);
  padding:clamp(2.25rem,6vw,3.5rem) clamp(1.5rem,5vw,3rem);
  transform:rotate(-2deg);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  text-align:center;
  animation:kirje-aukeaa .32s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes kirje-aukeaa{
  from{opacity:0;transform:rotate(-2deg) scale(.88) translateY(14px)}
  to  {opacity:1;transform:rotate(-2deg) scale(1)   translateY(0)}
}

.letter__seal{
  display:block;width:46px;height:46px;margin:0 auto clamp(1.25rem,3vw,2rem);
  border-radius:50%;background:var(--red);
}

/* Kasinkirjoitettu teksti. Riviväli on väljä, koska kaunokirjoitus
   nousee ja laskee perusviivan ylä- ja alapuolelle. */
.letter__line{
  font-family:"Dancing Script","Segoe Script","Bradley Hand",cursive;
  font-weight:600;
  font-size:clamp(1.35rem,4.6vw,1.85rem);
  line-height:1.5;
  margin:0 0 .85em;
  color:var(--black);
}
.letter__sign{
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
}
.letter__sign a{
  font-family:"Dancing Script","Segoe Script","Bradley Hand",cursive;
  font-weight:700;
  font-size:clamp(1.7rem,6vw,2.5rem);
  border-bottom:2px solid currentColor;
  padding-bottom:.1em;
}
@media (hover:hover) and (pointer:fine){ .letter__sign a:hover{color:var(--hot)} }

.letter__close{
  position:absolute;top:.4rem;right:.6rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--font);font-size:30px;line-height:1;
  color:var(--black);padding:.35rem .5rem;
}
@media (hover:hover) and (pointer:fine){ .letter__close:hover{color:var(--hot)} }

/* Jos kayttaja on pyytanyt vahemman liiketta, kirje ja kuori
   vain ilmestyvat paikalleen. */
@media (prefers-reduced-motion:reduce){
  .drop__env,.drop__skip,.letter__paper{animation:none}
}


/* ============================================================
   KUVIEN SUOJAUS
   Puhelimessa pitka painallus kuvan paalla avaisi Tallenna kuva
   -valikon. Tama estaa sen. Hidaste, ei lukko.
   ============================================================ */

img{
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
  user-select:none;
}

/* ============================================================
   PAINALLUKSEN PALAUTE
   Jokainen painettava asia kutistuu hieman kun siihen kosketaan.
   Ilman tata kayttoliittyma ei kuittaa mitaan, ja napautus tuntuu
   silta ettei mitaan tapahtunut. Vaikutus on pieni tarkoituksella:
   sen huomaa vain jos sita ei ole.
   ============================================================ */

.nav__links a,
.link,
.loadmore,
.footer a,
.letter__sign a,
.letter__close,
.lightbox__close,
.lightbox__nav,
.work,
.pair,
.newworks img,
.collage img{
  transition:transform .16s var(--ease-out), opacity .18s var(--ease-out), color .16s var(--ease-out);
}

.nav__links a:active,
.link:active,
.loadmore:active,
.footer a:active,
.letter__sign a:active,
.letter__close:active,
.lightbox__close:active,
.lightbox__nav:active{ transform:scale(.97) }

/* Kuvat kutistuvat vahemman: iso pinta liikkuu silmassa enemman
   kuin pieni, joten sama luku tuntuisi liialliselta. */
.work:active,
.pair:active,
.newworks img:active,
.collage img:active{ transform:scale(.985) }

/* ============================================================
   ESIINTULO VIERITTAESSA
   Osiot nousevat paikalleen kun ne tulevat nakyviin. Tarkoitus ei
   ole koristelu vaan jarjestys: silma saa yhden asian kerrallaan
   sen sijaan etta koko sivu olisi valmiina odottamassa.

   Piilotus tapahtuu vain jos JavaScript on paalla (html.js).
   Nain sivu nakyy kokonaan myos silloin kun skripti ei lataudu -
   muuten kavija nakisi tyhjan sivun.
   ============================================================ */

.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* Ruudukon osat tulevat perakkain. Porrastuksen viive asetetaan
   js/site.js:ssa sen mukaan mitka ruudut tulevat nakyviin samalla
   kertaa, ja se katkaistaan kuudenteen - muuten 37 taulun ruudukko
   kestaisi kaksi sekuntia. */
.js [data-reveal-stagger] > *{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.js [data-reveal-stagger] > *.is-in{ opacity:1; transform:none }

/* Jos kayttaja on pyytanyt vahemman liiketta, sisalto on heti
   paikallaan. Liike poistuu, sisalto ei. */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],
  .js [data-reveal-stagger] > *{
    opacity:1;
    transform:none;
    transition:none;
  }
}