/* Lempäälän Varaosat, ländäri.
   Yksi ruutu ilman skrollausta: min-height 100svh, ei overflow hidden.
   Kotkan mitattu oppi: overflow hidden nielee vuodon ja leikkaa sisällön,
   oikea kuvio on grid + tiivistys @media (max-height). */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--pinta-syva);
  color: var(--teksti);
  font-family: var(--fontti-leipa);
  line-height: var(--rivivali-leipa);
  position: relative;
  isolation: isolate;
}

.piilo {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Taustakerros: kuva, verho, hehku, kalvo --- */

.tausta {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.tausta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* Verho tummentaa tekstin taakse, ei koko kuvaa. Kaksi paallekkaista
   gradienttia kertautuu, joten pystysuunta pidetaan kevyena ja tummennus
   tehdaan vaakasuunnassa vasemmalle, jonne teksti tulee. Kuvan pitaa
   nakya: portti T3 mittaa ettei ankkuri ole tasavari. */
.tausta__verho {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 11, 13, 0.62) 0%, rgba(9, 11, 13, 0.12) 42%, rgba(9, 11, 13, 0.78) 100%),
    linear-gradient(90deg, rgba(9, 11, 13, 0.9) 0%, rgba(9, 11, 13, 0.62) 34%, rgba(9, 11, 13, 0.06) 68%, rgba(9, 11, 13, 0.3) 100%);
}

/* Valokerros. Andy 2026-09-04: reuna nakyi vinona rajana.

   Juurisyy mitattu: gradientin akseli on 103 astetta, joten sen
   lapinakyvat paat osuvat elementin yla- ja alareunaan. Elementin
   PYSTYREUNAT leikkasivat gradientin taydesta kirkkaudesta, ja
   rotate(5deg) teki leikkauksesta vinon rajan. Rivi- ja
   sarakekeskiarvot eivat nayttaneet sita, koska raja on vino.

   Korjaus on maski joka haivyttaa kaikki nelja reunaa. Elementti on
   samalla selvasti leveampi, jotta haivytys mahtuu reunoille ja
   liikkeelle jaa matkaa ilman etta ydin ohenee. */
.tausta__hehku {
  position: absolute;
  top: -24%;
  right: 14%;
  width: clamp(320px, 56vw, 820px);
  height: 148%;
  background: linear-gradient(
    103deg,
    transparent 6%,
    color-mix(in srgb, var(--aksentti-huippu) 4%, transparent) 24%,
    color-mix(in srgb, var(--aksentti-huippu) 26%, transparent) 47%,
    color-mix(in srgb, var(--aksentti) 10%, transparent) 68%,
    transparent 90%
  );
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  transform: translate3d(-9%, 0, 0) rotate(5deg);
  transform-origin: 50% 18%;
  opacity: 0.26;
  pointer-events: none;
}

.tausta__poly {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.kalvo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* --- Ylätunniste --- */

.ylin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rako);
  padding: var(--pysty) var(--reuna) 0;
}

.brandi {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
}

.brandi__merkki {
  width: clamp(26px, 2vw, 34px);
  height: clamp(26px, 2vw, 34px);
  fill: var(--teksti);
  flex: none;
  display: block;
}

/* line-height 1 + overflow hidden leikkaisi Ä:n ja Ö:n pisteet, koska ne
   nousevat versaalikorkeuden yläpuolelle. Mitattu 2026-09-04: nimi
   renderöityi muodossa LEMPAALAN VARAOSAT. Väljyys on siksi pakollinen. */
.brandi__nimi {
  font-family: var(--fontti-display);
  font-size: clamp(0.95rem, 0.82rem + 0.6vw, 1.24rem);
  letter-spacing: 0.02em;
  line-height: 1.28;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tila-pilleri {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--viiva);
  border-radius: 999px;
  background: var(--lasi);
  backdrop-filter: blur(7px);
  font-size: var(--koko-pieni);
  letter-spacing: var(--valistys-label);
  text-transform: uppercase;
  color: var(--teksti-himmea);
  white-space: nowrap;
}

.tila-pilleri i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aksentti);
  flex: none;
}

/* --- Pääalue --- */

.naytto {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--rako);
  padding: var(--pysty) var(--reuna);
  min-width: 0;
}

.teksti { min-width: 0; }

.ylarivi {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: var(--koko-pieni);
  letter-spacing: var(--valistys-label);
  text-transform: uppercase;
}

/* V1-viesti on landingin tarkein yksittainen lause: se kertoo miksi sivu
   on olemassa. Andy 2026-09-04: se oli liian pieni ja hiljainen. Nyt se on
   oma nostettu pinta, ei pelkka tekstirivi. */
.pian {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 clamp(1rem, 0.7rem + 0.9vw, 1.5rem);
  padding: 0.62rem 1.15rem 0.62rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--aksentti) 42%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--aksentti) 16%, transparent) 0%,
      rgba(13, 18, 23, 0.5) 55%,
      rgba(10, 14, 18, 0.42) 100%);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 var(--pian-hehku, 26px) color-mix(in srgb, var(--aksentti) 22%, transparent);
  color: var(--teksti);
  font-family: var(--fontti-display);
  font-size: clamp(0.92rem, 0.8rem + 0.55vw, 1.22rem);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ylarivi__piste {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--aksentti);
}

/* Piste on sydan: se sykkii hitaasti ja kertoo etta tyo on kaynnissa. */
.pian__piste {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--aksentti-huippu);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--aksentti) 26%, transparent),
    0 0 14px color-mix(in srgb, var(--aksentti-huippu) 70%, transparent);
}

.ylarivi {
  color: var(--teksti-himmea);
  margin-bottom: 0.7rem;
}

h1 {
  margin: 0 0 0.9rem;
  font-family: var(--fontti-display);
  font-weight: 700;
  font-size: var(--koko-h1);
  line-height: var(--rivivali-otsikko);
  letter-spacing: var(--valistys-otsikko);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Otsikon toinen rivi kantaa aksentin, ja se taittaa valoa kirjainten yli.
   color on fallback: jos background-clip ei ole tuettu, teksti jaa
   nakyviin taytena varina eika katoa. Hehku on tarkoituksella hillitty,
   koska voimakas hehku muuttaa savyn neoniksi. */
h1 em {
  font-style: normal;
  display: block;
  color: var(--aksentti);
  background: var(--aksentti-taite);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(79, 168, 232, 0.2));
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

.ingressi {
  margin: 0 0 clamp(1.2rem, 0.8rem + 1.4vw, 2.1rem);
  max-width: 46ch;
  font-size: var(--koko-ingressi);
  color: var(--teksti-himmea);
}

/* --- Toiminnot --- */

.toiminnot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.nappi {
  display: grid;
  gap: 0.1rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--sade);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--kesto-nopea) var(--pehmennys),
              background-color var(--kesto-nopea) var(--pehmennys),
              border-color var(--kesto-nopea) var(--pehmennys);
}

.nappi__yla {
  font-size: var(--koko-mikro);
  letter-spacing: var(--valistys-label);
  text-transform: uppercase;
  opacity: 0.78;
}

.nappi__ala {
  font-family: var(--fontti-display);
  font-size: var(--koko-nappi);
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Nappi taittaa samaan suuntaan kuin otsikko, mutta kapeammalla
   valilla: tummin sävy on #3D9BE0, joka antaa tummalle tekstille
   6,27:1. Sisainen valoreuna tekee pinnasta esineen eika laikun. */
.nappi--ensi {
  background: linear-gradient(140deg, var(--aksentti-kirkas) 0%, var(--aksentti) 45%, #3D9BE0 100%);
  color: #04121e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 0 22px rgba(79, 168, 232, 0.16);
}

.nappi--ensi .nappi__yla { opacity: 0.9; }

.nappi--toinen {
  background: var(--lasi-vahva);
  border-color: var(--viiva-vahva);
  color: var(--teksti);
  backdrop-filter: blur(7px);
}

.nappi:hover,
.nappi:focus-visible { transform: translateY(-2px); }

/* Hover kirkastaa taitteen, ei korvaa sita litealla varilla. */
.nappi--ensi:hover,
.nappi--ensi:focus-visible {
  background: linear-gradient(140deg, #9FE2FF 0%, var(--aksentti-kirkas) 45%, var(--aksentti) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
              0 0 30px rgba(79, 168, 232, 0.26);
}

.nappi--toinen:hover,
.nappi--toinen:focus-visible { border-color: var(--aksentti); }

a:focus-visible,
.nappi:focus-visible {
  outline: 2px solid var(--aksentti);
  outline-offset: 3px;
}

/* --- Yhteystietopaneeli --- */

.tiedot {
  border: 1px solid rgba(242, 239, 232, 0.26);
  border-radius: var(--sade-pinta);
  background:
    linear-gradient(135deg, rgba(12, 18, 23, 0.58) 0%, rgba(8, 12, 16, 0.48) 52%, rgba(6, 9, 13, 0.56) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
  backdrop-filter: blur(8px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.26);
  padding: clamp(0.9rem, 0.6rem + 0.8vw, 1.3rem);
  min-width: 0;
}

.tiedot__otsake {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: var(--koko-mikro);
  letter-spacing: var(--valistys-label);
  text-transform: uppercase;
  color: var(--teksti-lasilla);
}

.tiedot__syke {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aksentti);
  flex: none;
}

.tiedot__rivi {
  display: grid;
  gap: 0.16rem;
  padding: 0.66rem 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.tiedot__rivi + .tiedot__rivi { margin-top: 0.34rem; }

.tiedot__avain {
  font-size: var(--koko-mikro);
  letter-spacing: var(--valistys-label);
  text-transform: uppercase;
  color: var(--teksti-lasilla);
}

.tiedot__rivi strong {
  font-family: var(--fontti-display);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.24rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tiedot__rivi small {
  font-size: var(--koko-pieni);
  color: var(--teksti-lasilla);
}

a.tiedot__rivi:hover strong,
a.tiedot__rivi:focus-visible strong {
  color: var(--teksti);
  text-decoration: underline;
  text-decoration-color: var(--aksentti);
  text-underline-offset: 0.18em;
}

/* Sähköpostinappi rakentuu vasta JS:ssä: osoitetta ei ole lähdekoodissa. */
.tiedot__posti {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  margin-top: 0.16rem;
  padding: 0.34rem 0.66rem;
  border: 0;
  border-radius: 999px;
  background: rgba(79, 168, 232, 0.14);
  color: var(--aksentti-huippu);
  font: inherit;
  font-family: var(--fontti-display);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--kesto-nopea) var(--pehmennys),
              color var(--kesto-nopea) var(--pehmennys);
}

.tiedot__posti::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--aksentti);
  transform: rotate(45deg);
}

.tiedot__posti:hover,
.tiedot__posti:focus-visible {
  background: rgba(79, 168, 232, 0.24);
  color: var(--teksti);
}

.tiedot__posti:focus-visible {
  outline: 2px solid var(--aksentti);
  outline-offset: 3px;
}

/* --- Alatunniste --- */

.alin {
  padding: 0 var(--reuna) var(--pysty);
  font-size: var(--koko-pieni);
  color: var(--teksti-hiljainen);
}

.alin__rivi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  padding-top: 0.5rem;
}

/* Andy 2026-09-04 Yogalla: tama 1 px viiva luki kuvassa selkeana rajana.
   Mitattu: se oli sivun ainoa vaakasuora epajatkuvuus (y=811, hyppy 29,
   kun taustakerroksen suurin hyppy oli 1,3). Terava viiva korvattiin
   pehmealla hailla joka tummentaa alatunnisteen taakse ja katoaa
   reunoilla, jolloin alue erottuu sulautumalla eika rajaamalla. */
.alin {
  position: relative;
  isolation: isolate;
}

/* Hail tummentaa alatunnisteen TAAKSE, ei sen paalle. Andy 2026-09-04:
   ensimmainen versio oli absoluuttisesti positioitu ilman z-indexia,
   jolloin se maalautui ei-positioidun tekstin paalle ja soi rivien
   ylaosan luettavuuden. Nyt hail on omalla kerroksellaan alimpana ja
   sisalto sen paalla. */
.alin::before {
  content: "";
  position: absolute;
  inset: -2.4rem 0 auto 0;
  height: 3.6rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(9, 11, 13, 0) 0%,
    rgba(9, 11, 13, 0.28) 55%,
    rgba(9, 11, 13, 0.5) 100%);
}

/* Rivit hengittavat hailin alareunasta alaspain, jotta ylimman rivin
   ylareuna ei jaa hailin tiheimpaan kohtaan. */
.alin__rivi:first-child {
  padding-top: 0.85rem;
}

.alin__rivi--ala { color: var(--teksti-hiljainen); opacity: 0.82; }

.alin__huomio { font-style: italic; }

/* --- Sisääntulo: sisältö on näkyvissä ilman JS:ää --- */

.tuo-esiin { will-change: transform, opacity; }

/* --- Tiivistys: yksi ruutu myös matalilla ja kapeilla näytöillä --- */

@media (max-width: 940px) {
  .naytto {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(0.9rem, 0.6rem + 1.4vw, 1.5rem);
  }
  .ingressi { max-width: none; }
}

/* Mitattu 2026-09-04: 390x844 skrollasi 109 px. Suurin yksittainen syy oli
   flex 1 1 100% napeissa, joka pakotti ne allekkain. Yksi ruutu on lukittu
   paatos, joten mobiili tiivistetaan eika skrollausta sallita. */
@media (max-width: 560px) {
  /* Mitattu 2026-09-04: brandinimi ja pilleri ovat molemmat nowrap eivatka
     mahdu rinnakkain 360 px:n ruudulle. Ne pakottivat sivun 423 px levyiseksi
     ja tyonsivat kaiken muun yli reunan. V2-viesti on pakollinen, joten sita
     ei lyhenneta eika piiloteta: header rivittyy sen sijaan kahdelle. */
  .ylin {
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: calc(var(--pysty) * 0.7);
  }
  .tila-pilleri {
    font-size: var(--koko-mikro);
    padding: 0.3rem 0.62rem;
    letter-spacing: 0.08em;
  }
  .ylarivi { display: none; }
  .pian { margin-bottom: 0.6rem; }

  h1 { font-size: clamp(1.68rem, 1.16rem + 2.9vw, 2.2rem); margin-bottom: 0.6rem; }
  .ingressi {
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }

  .toiminnot { gap: 0.5rem; }
  .nappi { flex: 1 1 0; padding: 0.62rem 0.7rem; }
  .nappi__ala { font-size: 0.92rem; }

  .tiedot { padding: 0.75rem 0.85rem; }
  .tiedot__otsake { margin-bottom: 0.5rem; }
  .tiedot__rivi { padding: 0.42rem 0; }
  .tiedot__rivi + .tiedot__rivi { margin-top: 0.22rem; }
  .tiedot__rivi small { display: none; }

  .alin { font-size: 0.64rem; line-height: 1.4; }
  .alin__rivi { justify-content: flex-start; gap: 0.12rem 0.7rem; padding-top: 0.3rem; }
}

/* Raja on 820 eika 720, koska 1024x768 (tabletti vaakatasossa) jai muuten
   valiin ja skrollasi 16 px. Mitattu 2026-09-04. */
@media (max-height: 820px) and (min-width: 941px) {
  :root {
    --koko-h1: clamp(1.95rem, 1.15rem + 2.6vw, 3.1rem);
    --pysty: clamp(0.7rem, 0.4rem + 1vw, 1.2rem);
  }
  .ingressi {
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .tiedot__rivi { padding: 0.4rem 0; }
  .tiedot__rivi + .tiedot__rivi { margin-top: 0.18rem; }
  .ylarivi { margin-bottom: 0.5rem; }
  /* Nostettu V1-badge vie tilaa: matalalla ruudulla se tiivistyy mutta
     pysyy selvasti suurempana kuin ymparoiva teksti. */
  .pian {
    padding: 0.46rem 0.95rem 0.46rem 0.8rem;
    font-size: 0.98rem;
    margin-bottom: 0.8rem;
  }
}

@media (max-height: 620px) {
  .ylarivi { display: none; }
  .ingressi { font-size: 0.95rem; margin-bottom: 0.9rem; }
  .tiedot__rivi small { display: none; }
}

/* Tehtaan runko vaatii yhden ruudun 360x640:sta ylospain. Mitattu
   2026-09-04: 360x640 skrollasi 52 px viela ensimmaisen mobiilikorjauksen
   jalkeen, koska se on seka kapea etta matala. */
@media (prefers-reduced-motion: reduce) {
  .tausta__poly { display: none; }
  .nappi,
  .tiedot__posti { transition: none; }
  .nappi:hover,
  .nappi:focus-visible { transform: none; }
}

@media (max-width: 560px) and (max-height: 700px),
       (max-width: 375px) and (max-height: 840px) {
  :root { --pysty: 0.55rem; }

  /* Tiukin koko 360x640. V1-badge pidetaan nostettuna, koska se on Andyn
     paatos, ja tila otetaan otsikosta, ingressista ja alatunnisteesta. */
  h1 { font-size: 1.28rem; line-height: 1.05; margin-bottom: 0.38rem; }
  .pian {
    font-size: 0.8rem;
    padding: 0.36rem 0.74rem 0.36rem 0.62rem;
    gap: 0.46rem;
    margin-bottom: 0.44rem;
  }
  .pian__piste { width: 7px; height: 7px; }
  .ingressi {
    font-size: 0.74rem;
    line-height: 1.3;
    margin-bottom: 0.36rem;
  }

  .alin { font-size: 0.6rem; line-height: 1.35; }
  .alin__rivi { padding-top: 0.2rem; gap: 0.12rem 0.7rem; }
  .alin__rivi:first-child { padding-top: 0.5rem; }
  .alin::before { inset: -1.6rem 0 auto 0; height: 2.4rem; }

  .nappi { padding: 0.46rem 0.58rem; }
  .nappi__yla { font-size: 0.6rem; }
  .nappi__ala { font-size: 0.85rem; }

  .tiedot { padding: 0.55rem 0.7rem; }
  .tiedot__otsake { margin-bottom: 0.35rem; }
  .tiedot__rivi { padding: 0.28rem 0; }
  .tiedot__rivi + .tiedot__rivi { margin-top: 0.12rem; }
  .tiedot__rivi strong { font-size: 0.98rem; }

  .alin { font-size: 0.66rem; }
  .alin__rivi { padding-top: 0.35rem; }
}

/* --- Skip-link ja alatunnisteen krediittilinkit --- */

/* Nakyy vasta nappaimistokohdistuksessa, koska yhden ruudun sivulla
   sen naytolla pitaminen olisi hälyä. Saavutettavuus vaatii silti
   etta se on olemassa ja tavoitettavissa. */
.ohita {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--aksentti);
  color: #04121e;
  font-family: var(--fontti-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 0 0 var(--sade) 0;
}

.ohita:focus {
  left: 0;
}

/* Krediittilinkit ovat tehtaan lukittu vakio. Ne erottuvat leipatekstista
   mutta eivat kilpaile sivun toimintojen kanssa. */
.alin__tekija a {
  color: var(--teksti-hiljainen);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--kesto-nopea) var(--pehmennys),
              border-color var(--kesto-nopea) var(--pehmennys);
}

.alin__tekija a:hover,
.alin__tekija a:focus-visible {
  color: var(--aksentti);
  border-bottom-color: color-mix(in srgb, var(--aksentti) 55%, transparent);
}