:root{
  --lnk-blue:#0a66c2;
  --bg:#f4f2ee;
  --card:#ffffff;
  --tx:rgba(0,0,0,.9);
  --tx2:rgba(0,0,0,.6);
  --tx3:rgba(0,0,0,.45);
  --xp-link-muted:rgba(0,0,0,.72);
  --line:rgba(0,0,0,.08);
  /* Valge kaardi sees olevad "kastid kasti sees" — kontaktipaneel ja
     Omniva plokk. Ühine muutuja hoiab need täpselt sama tooni. */
  --paneel:#f4f6f8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
}
/* Lingid: allakriipsutus ei hüppa kohale, vaid ilmub poole sekundiga
   ja kaob sama rahulikult.

   text-decoration ise ei animeeru, küll aga tema värv. Seepärast on
   kriips kogu aeg olemas ja lihtsalt läbipaistev — nii ei muutu ka
   teksti mõõdud hetkelgi ja ükski rida ei nihku.
   NB! Sellepärast ei tohi siin olla text-decoration:none. Kui mõni
   hilisem reegel selle tagasi paneb (topbar teeb nii meelega), kaob
   koos kriipsuga ka üleminek. */
a{
  color:var(--lnk-blue);
  text-decoration:underline;
  text-decoration-color:transparent;
  transition:text-decoration-color .5s ease;
}
a:hover{text-decoration-color:currentColor}
/* firmanimed jäävad LinkedIni kombel mustaks, aga on klikitavad */
a.plain{color:inherit}
.xp-muted-link{color:var(--xp-link-muted)}
.xp-muted-link:hover{color:var(--tx);text-decoration-color:currentColor}

/* ---------- layout: üks lai veerg ---------- */
/* Ülemine veeris on pool endisest (32 → 16 px): leht algab kõrgemalt ja
   kaanepilt jõuab silma varem. Keelevalik istub teadlikult kaanepildi peal. */
.wrap{max-width:792px;margin:0 auto;padding:16px 16px 24px}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  margin-bottom:8px;overflow:hidden;
}
/* v6: vertikaalne padding kaartides on v5-st 30% väiksem */
.card-pad{padding:0 24px 17px}
.card h2{
  font-size:20px;font-weight:600;margin:0;padding:17px 24px 8px;letter-spacing:-.2px;
}

/* ---------- hero ---------- */
.cover{
  height:130px;   /* originaal 201px → -20% → -30% → +15% */
  background:#1b3244 url("kaanepilt.jpg") center / cover no-repeat;
}
.hero-body{padding:0 24px 17px}
.avatar{
  width:152px;height:152px;border-radius:50%;
  border:4px solid #fff;background:#dce6f1;
  margin-top:-76px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* Öörežiimis on kaanepildil filter. Filter teeb temast oma kihi, mis
     jooksis muidu foto ülemise poole peale. Oma kiht hoiab foto peal. */
  position:relative;z-index:1;
}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}

/* kaks veergu: nimi vasakul, kontakt paremal */
.hero-grid{display:flex;gap:24px;align-items:flex-start;margin-top:12px}
.hero-main{flex:1 1 auto;min-width:0}
.hero-contact{flex:0 0 288px}
@media (max-width:720px){
  .hero-grid{display:block}
  .hero-contact{margin-top:20px}
  .hero-contact dd{white-space:normal;overflow-wrap:anywhere}
  /* About: sunnitud reavahe ainult laial ekraanil; kitsal jooksevad
     kaks lauset kokku, sest tekst murdub niikuinii */
  .about br{display:none}
}

.verified{display:inline-block;vertical-align:-2px;margin-left:6px}
.name{font-size:24px;font-weight:600;margin:0;letter-spacing:-.3px;line-height:1.25}
.headline{font-size:16px;margin:2px 0 0;line-height:1.4}
.meta{font-size:14px;color:var(--tx2);margin-top:4px}
.stats{font-size:14px;color:var(--tx2);margin-top:4px}
.stats b{color:var(--tx)}
.orgs{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;align-items:center}
.org{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.org svg{width:24px;height:24px;border-radius:2px;display:block}
/* Päris logofail (TalTech) istub samas 24 px ruudus, mis tähemärgi-SVG.
   Wordmark on lai ja läbipaistva taustaga, seega contain hoiab proportsiooni
   ja vertikaalselt keskel; õrn hall alus annab ruudule oma pinna, mis valgel
   lehel muidu ära kaoks. Vasak polster on paremast suurem, sest kitsam
   TAL-rida jätab logo optiliselt vasakule — see nihutab ta tagasi keskele.
   Sama hall kehtib ka tumedal teemal, et magenta loeks alati ühtemoodi. */
.org img.logo-img{
  width:24px;height:24px;border-radius:2px;display:block;
  object-fit:contain;object-position:center;background:#eef1f4;
  padding:2px 1px 2px 3px
}

/* kontaktipaneel hero's */
.hero-contact .box{
  border:1px solid var(--line);border-radius:8px;background:var(--paneel);
  padding:13px 15px;
}
.hero-contact h2{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 8px;padding:0;
}
.hero-contact dl{margin:0}
.hero-contact .row{display:flex;gap:8px;padding:6px 0;font-size:14px;align-items:baseline}
.hero-contact .row + .row{border-top:1px solid var(--line)}
.hero-contact dt{flex:0 0 48px;color:var(--tx3);font-size:12.5px}
.hero-contact dd{margin:0;flex:1;min-width:0;white-space:nowrap}

/* ---------- about ---------- */
.about p{margin:0 0 12px;font-size:14px;max-width:720px}
.about p:last-child{margin-bottom:0}

/* ---------- kirjutusmasin: hero pealkiri ----------
   Efekt on ainult "25 years..." real. About jäi puutumata, sest seal on
   tekst kirjutamiseks liiga pikk ja lugeja ootaks lõppu.
   Kursor on peenike joon teksti värvi, mitte terminali plokk: hele
   disain jääb selline nagu ta on.
   Paigutus ei liigu kirjutamise ajal üldse: tekst on algusest peale omal
   kohal ja tähed on lihtsalt veel nähtamatud. Vaata skripti kommentaari. */
.headline .kurs{
  display:inline-block;width:2px;height:1em;
  vertical-align:-.14em;
  /* Kursor ei tohi ruumi võtta: 1px vasakule + 2px laius - 3px paremale
     annab kokku nulli, nii et ükski täht ei nihku, kui kursor liigub. */
  margin:0 -3px 0 1px;
  background:var(--tx2);
  animation:pilgutus 1.05s steps(1) infinite;
}
/* Lõpus veel kaks pilku ja siis kaob jäädavalt.
   forwards hoiab viimase kaadri (nähtamatu) kuni skript ta ära koristab,
   nii et kursor ei sähvata enne kadumist veel korraks nähtavaks.
   NB! sama arv on skriptis PILKE_LOPUS all — kui muudad, muuda mõlemat. */
.headline .kurs.lopetab{animation-iteration-count:2;animation-fill-mode:forwards}
@keyframes pilgutus{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .headline .kurs{display:none}
}

/* ---------- experience ---------- */
.xp{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.xp:first-child{border-top:none;padding-top:3px}
.xp-logo{flex:0 0 48px;width:48px;height:48px;border-radius:4px;overflow:hidden;background:#eef3f8}
.xp-logo svg{display:block;width:48px;height:48px}
.xp-logo img.logo-img{
  display:block;width:48px;height:48px;
  object-fit:contain;object-position:center;background:#eef1f4;
  padding:5px 3px 5px 7px   /* vt .org img.logo-img: sama optiline nihe */
}
.xp-b{flex:1;min-width:0}
.xp-role{font-size:16px;font-weight:600;margin:0}
.xp-org{font-size:14px;margin:0}
.xp-dates{font-size:14px;color:var(--tx3);margin:0}
.xp-loc{font-size:14px;color:var(--tx3);margin:0}
.xp-desc{font-size:14px;margin:8px 0 0;white-space:pre-line}
.xp-note{font-size:14px;color:var(--tx3);margin:0}
.feat{
  display:flex;gap:12px;margin-top:12px;border:1px solid var(--line);border-radius:8px;
  padding:12px;background:var(--paneel);max-width:640px;
}
.feat-thumb{flex:0 0 96px;height:64px;border-radius:4px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.feat-t{font-size:14px;font-weight:600;margin:0}
.feat-d{font-size:13px;color:var(--tx2);margin:4px 0 0}

/* ---------- education ---------- */
.edu-note{font-size:14px;color:var(--tx2);margin:8px 0 0;max-width:720px}

/* Education on ainuke ühe kirjega kaart, seega mõjub sama hingamisruum
   siin tühjana. Kolm kohta kokku tõmmatud, kõik ainult #education sees,
   et Experience'i rütm jääks puutumata:
   erialarida tuleb 8 px asemel 3 px kaugusele, ja kaardi lõpust kaob
   valget ruumi 29 px pealt 20 px peale (11+17 → 7+12). */
#education .edu-note{margin-top:3px}
#education .xp{padding-bottom:7px}
#education .card-pad{padding-bottom:12px}

/* ---------- logode valge ääris ja vari ----------
   Kõik logod — Kasv.ai ja TTÜ märgid hero's, ametikohtade ruudud ning
   Omniva pisipilt — saavad 1 px valge ringi ja alles selle taha varju.
   Vari langeb paremale ja alla, nagu valgus tuleks ülalt vasakult.

   Ääris on tehtud varjuga (spread 1 px), mitte border'iga. Lehel kehtib
   box-sizing:border-box, seega päris border sööks logo enda pinda 1 px
   võrra ja 48 px ruudus olev SVG jääks servast pügatuks. Varjuring
   joonistub elemendist väljapoole ega puutu paigutusse üldse.
   Järjekord loeb: valge ring on kirjas esimesena ja joonistub tumeda
   varju peale, nii et vari algab alles ringi tagant.

   Loend on käsitsi kirjas, mitte üldine reegel: nii ei saa need
   kogemata alla ka profiilifoto ega verified-märk. */
.org svg,
.org img.logo-img,
.xp-logo{
  box-shadow:0 0 0 1px #fff, 2px 2px 5px rgba(0,0,0,.16);
}
/* Omniva pisipilt on ainuke, mis istub halli paneeli sees ja millel on
   juba oma hall ääris. Valge ring jooksis sellest välja teise joonena ja
   pilt nägi topeltraamiga välja.
   Vari jääb alles, aga poole nõrgemana ja poole väiksemana kui teistel
   logodel: tumedamal hallil pinnal loeb sama vari palju tugevamalt kui
   valgel kaardil. Nihe ja hägu on mõlemad pooled, nii et valgus langeb
   endiselt ülalt vasakult — ainult lähemalt. */
.feat-thumb{
  box-shadow:1px 1px 2.5px rgba(0,0,0,.08);   /* mujal 2px 2px 5px / .16 */
}

/* ---------- klikitavad logod ----------
   Kus firmanimi on link, on ka logo link samale aadressile: Kasv.ai
   hero's ja Experience'is, Qstep ja Omniva pisipilt.
   Ankur ei tohi paigutust muuta — mõõdud tulevad endiselt logo enda
   reeglist ja allakriipsutus võetakse maha, sest kriips jookseks pildi
   alla omaette jooneks. TTÜ ja Sisuhaldus jäävad klikkimatuks, sest
   neil ei ole ka nime küljes linki. */
a.logo-lnk{display:block;line-height:0}
a.logo-lnk,
a.xp-logo,
a.feat-thumb{text-decoration:none}
a.logo-lnk:hover,
a.xp-logo:hover,
a.feat-thumb:hover{text-decoration:none;opacity:.88}
@media (hover:hover){
  /* Sama pool sekundit mis tekstilinkide kriipsul, et logo ja nimi
     reageeriksid ühes tempos. */
  a.logo-lnk,a.xp-logo,a.feat-thumb{transition:opacity .5s ease}
}

/* ---------- t5: kaardi hover ja kerimisriba ---------- */

/* Neli suurt valget plokki saavad hiire all varju.
   hover:hover välistab puuteseadmed, kus vari jääks kleepuma. */
@media (hover:hover){
  /* Kestus on .card peal, mitte :hover peal — nii kehtib ta ka siis,
     kui hiir lahkub, ja vari kaob sujuvalt, mitte hetkega. */
  .card{transition:box-shadow .35s ease}
  .card:hover{box-shadow:0 3.36px 13.44px rgba(0,0,0,.12)}
}

/* Pastelsinine kerimisriba lehe ülaservas — täitub kerides.
   Ei vaja JavaScripti, kasutab CSS-i kerimisajajoont. */
body::before{
  content:"";position:fixed;top:0;left:0;z-index:60;
  width:100%;height:3px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#8fbfe3,#bcd9ef);
  animation:keriRiba linear;
  animation-timeline:scroll(root);
}
@keyframes keriRiba{to{transform:scaleX(1)}}

/* Sisu libiseb kerides altpoolt sisse ja ilmub — sama võte mis kasv.ai lehel.
   NB! kasutan translate'i, mitte transform'i, et kaardi hover-vari
   ja avatari hõljumine jääksid puutumata. */
/* Ainult liikumine, ilma läbipaistvuseta: plokk on kogu aeg täies
   värvis ja lihtsalt libiseb kohale. */
@keyframes ilmuAlt{
  from{translate:0 30px}
  to{translate:0 0}
}
.card{
  animation:ilmuAlt linear both;
  animation-timeline:view();
  /* Ilmumine on läbi siis, kui element on poole ulatuses
     sisse jõudnud. Ilma fademiseta talub see hilisemat paikajõudmist.
     Varasem "cover 32%" jättis viimase kaardi hoopis poolikuks, sest
     leht ei kerinud enam nii kaugele. */
  animation-range:entry 0% entry 50%;
}

/* Profiilifoto hõljub aeglaselt üles-alla, nagu kasv.ai visiitkaart.
   Ainult Chromiumil — põhjus on <head> mootorikontrolli juures. */
html[data-mootor="chromium"] .avatar{animation:hõljuFoto 7.35s ease-in-out infinite}   /* 10,5s → -30% */
@keyframes hõljuFoto{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4.2px)}   /* 6px → -30% */
}

@media (prefers-reduced-motion:reduce){
  body::before,.card,.avatar{animation:none;opacity:1;translate:none;transform:none}
  /* Foto hõljumise reegel on nüüd mootoriga piiratud ja seega kaalukam kui
     paljas .avatar. Sama valija kordus hoiab liikumise vaigistuse peal. */
  html[data-mootor] .avatar{animation:none;transform:none}
}

/* Hero pealkiri: sunnitud reavahe kaob alla 460 px.
   Tühik enne <br>-i hoiab laused eraldi ka siis, kui murre on peidus. */
@media (max-width:460px){
  .headline br{display:none}
}

/* ---------- kleepuv ülariba (toodud t17-st) ----------
   Niipea kui profiilifoto on ekraanilt kadunud, sõidab ülaservast sisse
   kitsas riba: pisike foto ja navigatsioon. Aktiivne sektsioon on ribal
   esile tõstetud, nii et lugeja teab alati, kus ta on.
   t17 teine katse — kaanepildi parallaks — jäi siia toomata. */

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;gap:12px;
  /* Külgveeris elab ainult .topbar-in peal. Kui ta oleks ka siin, siis
     laial ekraanil neelaks tsentreerimine ta ära ja kitsal liidaks
     juurde — foto joondus hüppaks 16 px võrra, kui aken kitsamaks läheb. */
  padding:8px 0;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--line);
  /* Riba hääbub kohale ja hääbub ära, mõlemat pidi pool sekundit. Varem
     libises ta ülalt sisse 0,34 s jooksul; kolmekümne piksli pealt
     käivitatuna luges see nõksatusena, sest liikumine algas kohe pärast
     seda, kui leht ise oli just liikuma hakanud. Paigal seisev hääbumine
     ei võistle kerimisega.

     visibility käib kaasas, et peidetud riba ei püüaks klikke ega
     tabulaatorit. Tema üleminek on 0 s, aga peitmisel viivitusega:
     nähtavaks läheb riba kohe hääbumise alguses, peidus alles siis, kui
     viimane protsent läbipaistvust on kadunud. */
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s, box-shadow .5s ease;
}
/* Vari tuleb alles koos ribaga. Peidetud riba vari ulatuks muidu lehe
   ülaserva hallika triibuna. */
.topbar.naita{
  opacity:1;
  visibility:visible;
  /* Teemavahetuse pehmus on siin kaasas samal põhjusel, mille pärast
     .topbar sai öörežiimi juures oma rea: see loend kirjutab teise üle. */
  transition:background-color .4s ease, border-color .4s ease,
             opacity .5s ease, visibility 0s, box-shadow .5s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
.topbar-in{
  max-width:792px;margin:0 auto;width:100%;
  display:flex;align-items:center;gap:12px;
  /* 16px .wrap'i veeris + 1px kaardi ääris + 24px kaardi sisemine
     padding = 41px. Täpselt nii palju jäi riba serva ja kaardi
     sisuveeru vahele, seega see inset paneb foto ja viimase
     menüüpunkti otse lehe sisu kohale, mitte kaardi äärest välja. */
  padding:0 41px;
}
.topbar img{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);flex:0 0 auto;
}
/* Nimi on nüüd menüü esimene punkt, mitte eraldi silt. Nav algab kohe
   foto järelt, sest nimi peab istuma seal, kus ta enne oli.
   Kitsal ekraanil tohib menüü horisontaalselt kerida, muidu ei mahu
   viis punkti telefoni laiusele ära. */
.topbar nav{
  display:flex;gap:4px;min-width:0;flex:1 1 auto;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
/* Nimi jääb vasakule, ülejäänud neli punkti lükatakse paremasse serva.
   Automaatne margin sööb ära kogu vaba ruumi. Kui ruumi ei ole — kitsas
   ekraan, kus menüü kerib — kahaneb ta ise nulli ja punktid jäävad
   tavalisse ritta. */
.topbar nav a.tb-nimi{margin-right:auto}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{
  color:var(--tx2);font-size:13px;padding:6px 10px;border-radius:6px;
  white-space:nowrap;
  /* Kõik punktid on algusest peale poolpaksud, mitte alles aktiivsena.
     Paksem kiri on laiem: kui kaal muutuks alles aktiveerumisel, nihkuks
     see punkt ja kõik temast paremal jäävad iga kerimise peale paigast.
     Nüüd on laius kogu aeg sama ja aktiivsus näitab end ainult tooni ja
     taustaga — täpselt see, mida silm siin ootab. */
  font-weight:600;
  /* Ülariba punktid ei kasuta kriipsu, vaid tausta — aga sama poole
     sekundiga, et kogu leht reageeriks ühtemoodi. */
  text-decoration:none;transition:background-color .5s ease,color .5s ease;
}
/* Nimi on menüüs teistest pisut tumedam, nagu ta lehel ka on. */
.topbar nav a.tb-nimi{color:var(--tx)}
.topbar nav a:hover{background:rgba(10,102,194,.08);color:var(--lnk-blue);text-decoration:none}
.topbar nav a.aktiivne{color:var(--lnk-blue);background:rgba(10,102,194,.1)}

/* Kerimisriba jääb päise alla, mitte selle taha. */
body::before{z-index:75}

@media (max-width:560px){
  .topbar nav a{padding:6px 7px;font-size:12px}
}
/* Umbes 500 px juures läheb see 82 px menüü enda alla vaja. Siis kahaneb
   veeris lehe enda 16 px peale: joondus kaardi sisuveeruga kaob, aga
   riba ei kleepu ka ekraani serva külge. */
@media (max-width:520px){
  .topbar-in{padding:0 16px}
}

/* Kitsal ekraanil vajab tekst laiust rohkem kui logo tähelepanu:
   Omniva märk ja kõik ametikohtade logod lähevad peitu.
   NB! peab olema stiililehe LÕPUS, muidu kirjutavad hilisemad
   .feat-thumb ja .xp-logo reeglid selle üle. */
@media (max-width:450px){
  .feat-thumb{display:none}
  .xp-logo{display:none}
}

/* ================= t2: läige (t1-st, poole õrnem) ====================
   t12-s käis valge sära üle kõigi kaartide. Siin saab selle AINULT
   esimene plokk — hero. Ülejäänud kaardid jäävad täpselt t6 omadeks:
   ainult hover-vari, mitte mingit liikuvat valgust.

   Vahe t1-st: triibu tugevus on täpselt pool. Ainus muudetud arv on
   gradiendi keskmine alfa .55 → .275; laius, nurk, kiirus ja asukoha
   arvutus on t1-ga identsed, et võrdlus näitaks ainult heledust.

   Piiraja on klass .sara hero <section>-i peal, mitte :first-child.
   Nii ei rända efekt kaasa, kui kaartide järjekord kunagi muutub, ja
   uue ploki läikima panemiseks piisab ühest klassist.

   Kaart ei nihku ega pöördu — ainus liikuv asi on triip ise. */

.card.sara{position:relative}

/* Triibu asukoha annab --kiil, mille arvutab JavaScript. Number ei ole
   kursori protsent, vaid background-position: pilt on kaardist LAI korda
   laiem (allpool 280%), nii et positsiooni protsent liigutab pilti mitu
   korda rohkem kui sama protsent kaardi laiust. Õige teisendus elab
   skriptis, et siin ei oleks kahte poolikut arvutust. */
.card.sara::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:8px;
  background:linear-gradient(
    105deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.275) 50%,   /* t1-s .55 — pool sellest */
    rgba(255,255,255,0) 65%);
  background-size:280% 100%;
  background-position:var(--kiil,50%) 0;
  opacity:var(--kiilHele,0);
  /* Süttimine on kiire, et triip oleks olemas juba servas sisenedes;
     kustumine tohib olla rahulikum. */
  transition:opacity .14s linear;
  mix-blend-mode:overlay;
}
.card.sara:not(:hover)::before{transition:opacity .38s ease}

@media (prefers-reduced-motion:reduce){
  .card.sara::before{display:none}
}

/* Nähtav fookus ainult klaviatuurile. */
:focus-visible{outline:2px solid var(--lnk-blue);outline-offset:2px;border-radius:4px}

/* ================= t8: kirjutised kasv.ai v4 artikliplokina ===========
   Lahendus on üle toodud kasv.ai v4 lehe "proof"-plokist: pealkiri ja
   "Kõik artiklid" ühel real, selle all lühike lause, ja kolm kaarti
   kõrvuti. Kaardil on kummitusnumber taustal, hiire all süttiv ülaserv
   ja kuupäev pillina, mitte halli tekstina.

   Üle toodi mehaanika, mitte kasv.ai värvid: roheline on siin asendatud
   lehe enda sinisega ja tume paneel valge kaardi hallika sisepaneeliga.
   Pilte plokis ei ole.

   NB! Klassid on wr-eesliitega. t2-l on juba oma .card ja .cards oleks
   sellega kohe segi läinud. */

/* Pealkirjarida: h2 vasakul, link paremal. Kaardi enda h2 padding
   tuleks siin topelt, seega see nullitakse ja veeris elab rea peal. */
.wr-head-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:17px 24px 0;
}
.wr-head-row h2{padding:0}
.wr-koik{font-size:17px;font-weight:600;white-space:nowrap;flex:0 0 auto}
/* Sektsiooni nimi on "Blog" ja ta on täpselt sama suur kui "Experience".
   Selle all elab ainult arhiivi nimi. Alapealkiri "Thoughts through the
   years" oli siin varem; ta kordas seda, mida kolm kaarti niigi ütlevad. */
.wr-alapead{padding:2px 24px 12px}
.wr-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx3);margin:0;
}

.wr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wr-card{
  position:relative;overflow:hidden;min-width:0;overflow-wrap:break-word;
  display:flex;flex-direction:column;
  background:var(--paneel);border:1px solid var(--line);border-radius:10px;
  padding:15px 16px 13px;
  color:inherit;text-decoration:none;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
}
.wr-card:hover{text-decoration:none}
/* Sisu käib numbri peal, mitte all. */
.wr-card > *{position:relative;z-index:1}

/* Kummitusnumber taustal — v4-st, aga kaardi väiksema mõõdu järgi
   väiksem ja lehe sinises. */
.wr-card::after{
  content:attr(data-article-number);
  position:absolute;top:-2px;right:10px;z-index:0;
  font-size:76px;font-weight:800;line-height:1;letter-spacing:-4px;
  color:transparent;-webkit-text-stroke:1.5px rgba(10,102,194,.10);
  pointer-events:none;
  transition:-webkit-text-stroke-color .35s ease,transform .35s ease;
}
/* Ülaserv jookseb hiire all vasakult paremale sisse. */
.wr-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--lnk-blue),#4f9ede);
  opacity:.6;transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
/* Liikumine ainult hiirega seadmel: puutel jääks tõstetud kaart kleepuma. */
@media (hover:hover){
  .wr-card:hover{
    transform:translateY(-2.5px);
    border-color:rgba(10,102,194,.45);
    box-shadow:0 10px 23px rgba(10,102,194,.14);
  }
  .wr-card:hover::before{transform:scaleX(1)}
  .wr-card:hover::after{
    -webkit-text-stroke-color:rgba(10,102,194,.2);
    transform:translateY(-3px) scale(1.03);
  }
}

.wr-t{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.2px;margin:0 0 8px}
/* Tutvustus võtab jääkruumi, nii et kolme kaardi jalus jääb ühele
   joonele ka siis, kui pealkirjad on eri pikkusega. */
.wr-txt{font-size:13.5px;line-height:1.6;color:var(--tx2);margin:0 0 14px;flex:1}
.wr-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0}
/* v4 kuupäevapill. Kuupäeva ennast veel ei ole, seega pill kannab
   praegu teemat — väljamõeldud kuupäeva siia ei panda. Kui päris
   kuupäev on teada, tuleb ta siia <time> sisse ja teema läheb ära. */
.wr-pill{
  font-size:11.5px;font-weight:600;
  background:rgba(10,102,194,.10);color:var(--lnk-blue);
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.wr-more{font-size:13px;font-weight:600;color:var(--lnk-blue);white-space:nowrap}

/* v4-s kadus kolmas kaart kitsal ekraanil ära. Siin ei tohi: see plokk
   on arhiivi sissepääs, mitte reklaam. Kolmas kaart läheb üle terve
   rea ja jääb loetavaks. */
@media (max-width:760px){
  .wr-cards{grid-template-columns:1fr 1fr}
  .wr-cards > :nth-child(3){grid-column:1 / -1}
}
@media (max-width:520px){
  .wr-cards{grid-template-columns:1fr}
  .wr-cards > :nth-child(3){grid-column:auto}
  .wr-head-row{display:block}
  .wr-koik{display:inline-block;margin-top:2px}
}

@media (prefers-reduced-motion:reduce){
  .wr-card,.wr-card::before,.wr-card::after{transition:none}
}

/* =========================================================
   t9 — NIGHT VISION (kasv.ai v4-st, tauri.ee värvides)
   Kogu teema elab muutujates: HTML jääb puutumata ja päevane
   pool ei muutu ühegi rea võrra. Alla on kirjutatud ainult need
   kohad, kus t2-s on värv otse reeglis, mitte muutujas.
   ========================================================= */
html[data-theme="dark"]{
  --bg:#12161a;
  --card:#1d2226;
  --paneel:#242b31;
  --tx:rgba(255,255,255,.92);
  --tx2:rgba(255,255,255,.64);
  --tx3:rgba(255,255,255,.46);
  --xp-link-muted:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.12);
  /* Päevane #0a66c2 jääks mustal taustal loetamatuks — öine sinine on
     sama LinkedIni toon, aga heledam. */
  --lnk-blue:#71b7f7;
  color-scheme:dark;
}
/* Vahetus on pehme, mitte plõks. */
html,body{transition:background-color .4s ease,color .4s ease}
.card,.hero-contact .box,.feat{transition:background-color .4s ease,border-color .4s ease}
/* Riba on siit välja võetud ja saab oma rea. Üks transition-deklaratsioon
   kirjutab teise tervikuna üle, seega oleks ta siin ühes loendis olles
   kaotanud ülal kirjeldatud hääbumise. Nüüd on mõlemad koos.
   .naita oma on täpsem kui see rida ja jääb ülalt kehtima. */
.topbar{
  transition:background-color .4s ease, border-color .4s ease,
             opacity .5s ease, visibility 0s linear .5s, box-shadow .5s ease;
}

/* Verified-märgi sinine on SVG atribuudis — CSS võidab selle. */
html[data-theme="dark"] .verified path{fill:var(--lnk-blue)}

/* Profiilifoto valge ring peab olema kaardi värvi, mitte valge. */
html[data-theme="dark"] .avatar{border-color:var(--card);background:#2b3238}
/* Kaanepilt on öösel pisut tagasi tõmmatud, muidu põleb lehest välja. */
html[data-theme="dark"] .cover{filter:brightness(.82) saturate(.9)}

/* Logode valge ring läheb üle õrnaks heledaks servaks. */
html[data-theme="dark"] .org svg,
html[data-theme="dark"] .org img.logo-img,
html[data-theme="dark"] .xp-logo{
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 2px 2px 6px rgba(0,0,0,.55);
}
html[data-theme="dark"] .feat-thumb{box-shadow:2px 2px 6px rgba(0,0,0,.55)}

@media (hover:hover){
  html[data-theme="dark"] .card:hover{box-shadow:0 3.36px 13.44px rgba(0,0,0,.55)}
}

/* Kleepuv ülariba: sama klaas, aga tumedast küljest. */
html[data-theme="dark"] .topbar{background:rgba(29,34,38,.86)}
html[data-theme="dark"] .topbar nav a:hover{background:rgba(113,183,247,.14)}
html[data-theme="dark"] .topbar nav a.aktiivne{background:rgba(113,183,247,.16)}

/* Hero läige on valge triip — öösel piisab poolest tugevusest. */
html[data-theme="dark"] .card.sara::before{
  background:linear-gradient(
    105deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,0) 65%);
  background-size:280% 100%;
  background-position:var(--kiil,50%) 0;
  mix-blend-mode:screen;
}

/* Blogikaardid: kõik sinised pesud on t8-s otse reeglites, seega siin
   on nad öise sinisega üle kirjutatud. */
html[data-theme="dark"] .wr-card::after{-webkit-text-stroke-color:rgba(113,183,247,.12)}
html[data-theme="dark"] .wr-card::before{background:linear-gradient(90deg,#71b7f7,#4cc0e0)}
html[data-theme="dark"] .wr-pill{background:rgba(113,183,247,.14);color:var(--lnk-blue)}
@media (hover:hover){
  html[data-theme="dark"] .wr-card:hover{
    border-color:rgba(113,183,247,.45);
    box-shadow:0 10px 23px rgba(0,0,0,.5);
  }
  html[data-theme="dark"] .wr-card:hover::after{-webkit-text-stroke-color:rgba(113,183,247,.24)}
}

/* ---------- lüliti ----------
   Nupp elab lehe paremas alanurgas, päikesest saab öösel kuu. */
.theme-btn{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--tx);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:transform .25s ease,background-color .4s ease,border-color .4s ease;
}
.theme-btn:hover{transform:rotate(-18deg) scale(1.08)}
.theme-btn svg{width:20px;height:20px;fill:currentColor}
.theme-btn .moon{display:none}
html[data-theme="dark"] .theme-btn{box-shadow:0 2px 10px rgba(0,0,0,.6)}
html[data-theme="dark"] .theme-btn .moon{display:block}
html[data-theme="dark"] .theme-btn .sun{display:none}

/* Oma vihje, mitte brauseri aeglane title-mull. Ta ilmub nii hiire all
   kui ka klaviatuurifookuses ja ei püüa hiirt kinni.
   Teksti tõeallikas on nupu aria-label: ekraanilugeja ja nähtav vihje
   ei saa nii lahku minna. */
.theme-btn::after{
  content:attr(aria-label);
  /* 30 px nupu keskjoonest kõrgemal: nupp ise istub ekraani alumises
     servas ja keskele joondatud vihje jäi osaliselt vaatest välja.
     Pöördumine hiire all on lubatud, aga see toimub nüüd juba
     tõstetud asendist — mõlemad otsad on 30 px kõrgemal. */
  position:absolute;right:calc(100% + 10px);top:50%;translate:0 calc(-50% - 30px);
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  background:rgba(20,24,28,.92);color:#fff;font-size:12px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
html[data-theme="dark"] .theme-btn::after{background:rgba(240,243,246,.94);color:#12161a}
.theme-btn:hover::after,.theme-btn:focus-visible::after{opacity:1}
/* Nupp ise pöördub hiire all — vihje pöörduks kaasa ja jääks viltu. */
.theme-btn:hover::after{rotate:18deg}

@media (prefers-reduced-motion:reduce){
  html,body,.theme-btn,.theme-btn::after{transition:none}
  .theme-btn:hover{transform:none}
  .theme-btn:hover::after{rotate:none}
}

/* ================= t1: logo tõuseb infobloki kohal ==================
   Kui hiir on logoga seotud infobloki peal — hero orginimi, ametikoha
   rida, Omniva kast või haridusrida — tõuseb logo 0,3125 s kestva
   liigutusega 2 px üles ja 1 px vasakule ning vari läheb üle kahe korra
   tugevamaks. Liikumine ja vari koos loevad ühe žestina: asi
   kerkib pinnalt ära, mitte ei nihku külge.

   Kutsuja on plokk, mitte logo ise. Logo on väike sihtmärk; kui ta
   ootab hiirt enda peale, jääb efekt enamasti nägemata. Suur plokk
   annab sama vihje juba siis, kui pilk on alles tekstil.

   Suund on üles-vasakule sama põhjusega, miks vari langeb alla-paremale:
   lehel paistab valgus ülalt vasakult ja tõusev asi liigub valguse poole.

   Ainult hover:hover — puuteseadmel jääks tõstetud olek kleepuma. */
@media (hover:hover){
  /* Klikitavad logod on ise ankrud ja neil on juba oma opacity-üleminek
     (a.xp-logo, a.feat-thumb). See reegel on täpsem kui paljas .xp-logo
     ja sõi mu ülemineku ära, seega on ankrud siin nimeliselt kaasas ja
     opacity on koos uute omadustega samas loendis alles.

     Tõus ja vari käivad koos: 0,25 s + veerand ehk 0,3125 s. Opacity jääb
     teadlikult poolele sekundile: see hääbumine on logol ja tekstilingi
     kriipsul sama vana tempo ja peab nendega ühte sammu jääma. */
  .org svg,.org img.logo-img,.xp-logo,.feat-thumb,
  a.xp-logo,a.feat-thumb{
    transition:transform .3125s cubic-bezier(.2,.8,.2,1),
               box-shadow .3125s ease,
               opacity .5s ease;
  }
  .org:hover svg,
  .org:hover img.logo-img,
  .xp:hover > .xp-logo,
  .feat:hover .feat-thumb{
    transform:translate(-1px,-2px);
  }

  /* Vari: puhkeoleku .16 → .36 ja Omniva oma .08 → .18. Ring jääb sama.
     Tumedal teemal on puhkeolek juba .55 ja poolteist korda sellest läheks
     ühest üle, seega kasvab seal mustuse asemel hägu: 6 px → 9 px annab
     sama "kõrgemal" tunde ilma, et vari muutuks mustaks laiguks. */
  .org:hover svg,
  .org:hover img.logo-img,
  .xp:hover > .xp-logo{
    box-shadow:0 0 0 1px #fff, 2px 2px 5px rgba(0,0,0,.36);
  }
  .feat:hover .feat-thumb{box-shadow:1px 1px 2.5px rgba(0,0,0,.18)}

  html[data-theme="dark"] .org:hover svg,
  html[data-theme="dark"] .org:hover img.logo-img,
  html[data-theme="dark"] .xp:hover > .xp-logo{
    box-shadow:0 0 0 1px rgba(255,255,255,.16), 2px 2px 9px rgba(0,0,0,.9);
  }
  html[data-theme="dark"] .feat:hover .feat-thumb{box-shadow:2px 2px 9px rgba(0,0,0,.9)}

  /* Omniva kast elab Qstepi rea sees, seega hiir tema kohal on ka
     Qstepi real ja kaks logo kerkiksid korraga. Ülemine jääb paigale:
     korraga tõuseb see, mille kohal hiir päriselt on. */
  .xp:has(.feat:hover) > .xp-logo{
    transform:none;
    box-shadow:0 0 0 1px #fff, 2px 2px 5px rgba(0,0,0,.16);
  }
  html[data-theme="dark"] .xp:has(.feat:hover) > .xp-logo{
    box-shadow:0 0 0 1px rgba(255,255,255,.16), 2px 2px 6px rgba(0,0,0,.55);
  }
}

@media (prefers-reduced-motion:reduce){
  .org svg,.org img.logo-img,.xp-logo,.feat-thumb,
  a.xp-logo,a.feat-thumb{transition:none}
  .org:hover svg,
  .org:hover img.logo-img,
  .xp:hover > .xp-logo,
  .feat:hover .feat-thumb{transform:none}
}

/* Keelevalik on päris lüliti pikkade nimedega, nagu Kasv.ai päises. Ta istub
   kaanepildi peal ja kerib koos lehega vaatest välja — kerimise ajal võtab
   tema töö üle sama lüliti veidi väiksem variant kerimisribas.
   z-index 65 on teadlikult kahe vahel: kaanepildist kõrgemal, aga kerimisriba
   (70) all, nii et riba libiseb tema peale, mitte tema alla. */
.language-switch{
  position:absolute;top:26px;left:50%;transform:translateX(-50%);z-index:65;
  display:flex;align-items:center;gap:0;padding:2px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:background .2s ease;
}
/* teise keele kohale minnes tumeneb kogu soon, mitte ainult see üks segment */
.language-switch:has(a.off:hover){background:#ebedf0}
.language-switch a{
  padding:3px 12px;border-radius:999px;text-align:center;white-space:nowrap;
  color:var(--tx2);font-size:12px;font-weight:600;letter-spacing:.2px;text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.language-switch a.on{background:var(--lnk-blue);color:#fff}
.language-switch a.off:hover{color:var(--tx)}
html[data-theme="dark"] .language-switch:has(a.off:hover){background:#2a3138}
html[data-theme="dark"] .language-switch a.on{color:#10161a}

/* Kerimisriba variant: sama lüliti ja samad täispikad sildid, ainult veidi
   väiksem ja ilma oma varjuta, sest ribal on juba oma taust. Kaks automaatset
   veerist — üks nime
   küljes, teine siin — jagavad vaba ruumi pooleks, nii et lüliti seisab
   `Tauri Laane` ja menüü vahel. Selektor on nimme `nav`-i kaudu: muidu oleks
   ta `.topbar nav a` reeglitega sama kaaluga ja kaotaks värvid. */
.topbar nav .language-switch{
  position:static;transform:none;flex:0 0 auto;margin-right:auto;
  padding:2px;box-shadow:none;background:var(--paneel);
}
.topbar nav .language-switch a{
  padding:2px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.2px;
  color:var(--tx2);background:transparent;
}
.topbar nav .language-switch a.on{background:var(--lnk-blue);color:#fff}
.topbar nav .language-switch a.off:hover{background:transparent;color:var(--tx)}
html[data-theme="dark"] .topbar nav .language-switch a.on{color:#10161a}

.wr-card-soon{cursor:default}
.not-found{min-height:42vh;padding-top:34px}
.not-found h1{margin:0 0 12px;font-size:32px}
.not-found p{margin:0 0 18px;color:var(--tx2);font-size:16px}