:root{
  --orange:#F4541A;
  --orange-soft:#FF7A45;
  --bg:#0E0C0A;
  --bg-2:#15110D;
  --fg:#F3EEE7;
  --fg-dim:#A89F93;
  --line:rgba(243,238,231,0.14);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--bg);color:var(--fg);font-family:var(--sans);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* language toggle visibility */
html.lang-et .en{display:none}
html.lang-en .et{display:none}

a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}

/* ---------- custom cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--orange);
  border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  mix-blend-mode:difference;transition:width .25s,height .25s,background .25s;will-change:transform}
.cursor.hot{width:54px;height:54px;background:rgba(244,84,26,0.12)}
@media (hover:none){.cursor{display:none}}

/* ---------- nav pill ---------- */
.nav{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:6px;padding:7px 8px 7px 18px;
  background:rgba(20,16,12,0.6);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:100px;font-family:var(--mono);font-size:13px}
.nav .brand{font-weight:500;letter-spacing:.04em;margin-right:14px}
.nav .brand b{color:var(--orange);font-weight:500}
.nav .links{display:flex;gap:18px;color:var(--fg-dim)}
.nav .links a{transition:color .2s}
.nav .links a:hover{color:var(--fg)}
.nav .tools{display:flex;align-items:center;gap:8px;margin-left:16px}
.langbtn{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;cursor:pointer}
.langbtn span{padding:4px 9px;color:var(--fg-dim);transition:.2s;font-size:12px}
.langbtn span.on{background:var(--orange);color:#1a0a02}
.cta-pill{padding:8px 16px;background:var(--fg);color:#15110d;border-radius:100px;
  font-weight:500;transition:.2s}
.cta-pill:hover{background:var(--orange);color:#15110d}
@media(max-width:780px){.nav .links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;width:100%;overflow:hidden;
  display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;
  background:linear-gradient(115deg,#1b2a3a 0%,#2d3d4d 30%,#c9521f 78%,#F4541A 100%);
  z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% center;
  display:block;will-change:transform}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg,rgba(8,6,5,0.9) 0%,rgba(8,6,5,0.55) 32%,rgba(8,6,5,0) 58%),
    linear-gradient(0deg,rgba(8,6,5,0.7) 0%,rgba(8,6,5,0) 38%)}
.hero__inner{position:relative;z-index:2;width:min(1180px,92vw);margin:0 auto;padding-top:60px}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-soft);margin-bottom:22px}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,7.4vw,104px);
  line-height:1.0;letter-spacing:-.02em;max-width:14ch}
.hero h1 .accent{color:var(--orange)}
.hero__sub{margin-top:26px;max-width:46ch;color:#E7DED2;font-size:clamp(15px,1.5vw,18px)}
.hero__actions{margin-top:34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn-primary{font-family:var(--mono);font-size:14px;padding:14px 26px;border-radius:100px;
  background:var(--orange);color:#1a0a02;font-weight:500;transition:.25s;display:inline-flex;gap:8px;align-items:center}
.btn-primary:hover{transform:translateY(-2px);background:var(--orange-soft)}
.btn-ghost{font-family:var(--mono);font-size:14px;color:var(--fg-dim);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.2s}
.btn-ghost:hover{color:var(--fg);border-color:var(--orange)}

/* hero stats (right, thin-line annotations) */
.hero__stats{position:absolute;right:max(40px,5vw);top:50%;transform:translateY(-50%);
  z-index:2;display:flex;flex-direction:column;gap:38px;text-align:right}
.stat{position:relative;padding-right:20px}
.stat::after{content:"";position:absolute;right:0;top:6px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--orange);}
.stat b{display:block;font-family:var(--display);font-size:30px;font-weight:500;line-height:1}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
@media(max-width:880px){.hero__stats{display:none}}

.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue .bar{width:1px;height:42px;background:linear-gradient(var(--orange),transparent)}

/* ---------- about ---------- */
.about{background:var(--bg-2);padding:clamp(70px,12vh,140px) 0}
.about__inner{width:min(1180px,92vw);margin:0 auto;display:grid;
  grid-template-columns:0.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:center}
.about__photo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(160deg,#2a2520,#15110d)}
.about__photo img{width:100%;height:100%;object-fit:cover;display:block}
.about__tag{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.about h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-.01em;margin-bottom:20px}
.about p{color:var(--fg-dim);max-width:54ch;margin-bottom:16px}
.cards{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:.25s;background:rgba(255,255,255,0.012)}
.card:hover{border-color:var(--orange);transform:translateY(-3px)}
.card .k{font-family:var(--mono);font-size:12px;color:var(--orange-soft);letter-spacing:.1em}
.card .t{font-family:var(--display);font-size:19px;font-weight:500;margin-top:8px}
.card .d{font-size:13px;color:var(--fg-dim);margin-top:5px}
@media(max-width:780px){.about__inner{grid-template-columns:1fr}.about__photo{max-width:380px;aspect-ratio:4/5}}

/* ---------- generic sections (Projects / Resources / Contact) ---------- */
.section{padding:clamp(70px,11vh,130px) 0}
.section--alt{background:var(--bg-2)}
.section__inner{width:min(1180px,92vw);margin:0 auto}
.section__tag{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.section h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-.01em;margin-bottom:14px}
.section__lead{color:var(--fg-dim);max-width:54ch;margin-bottom:38px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:780px){.grid3{grid-template-columns:1fr}}

.linklist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.linklist a{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:.25s;font-family:var(--mono);font-size:14px}
.linklist a:hover{border-color:var(--orange);transform:translateY(-3px)}
.linklist a .arrow{margin-left:auto;color:var(--fg-dim);transition:.2s}
.linklist a:hover .arrow{color:var(--orange);transform:translate(2px,-2px)}
.linklist .kind{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-left:8px}
@media(max-width:780px){.linklist{grid-template-columns:1fr}}

.contact__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.footer{border-top:1px solid var(--line);padding:30px 0}
.footer__inner{width:min(1180px,92vw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:12px;color:var(--fg-dim)}

/* ---------- blog ---------- */
.bloglist{width:min(800px,92vw);margin:0 auto;padding:150px 0 90px}
.bloglist__head{margin-bottom:46px}
.bloglist__head h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,5vw,56px);letter-spacing:-.02em;line-height:1.05}
.post{display:block;border-top:1px solid var(--line);padding:26px 0;transition:padding .2s}
.post:last-child{border-bottom:1px solid var(--line)}
.post:hover{padding-left:8px}
.post .date{font-family:var(--mono);font-size:12px;color:var(--orange-soft);letter-spacing:.08em}
.post h2{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.6vw,28px);margin:8px 0 6px;letter-spacing:-.01em}
.post p{color:var(--fg-dim);max-width:60ch}

.article{width:min(680px,92vw);margin:0 auto;padding:150px 0 90px}
.article .date{font-family:var(--mono);font-size:12px;color:var(--orange-soft);letter-spacing:.08em}
.article h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.5vw,48px);letter-spacing:-.02em;margin:12px 0 28px;line-height:1.12}
.article__body{font-size:17px;line-height:1.8;color:#D9D2C7}
.article__body p{margin-bottom:20px}
.article__body h2{font-family:var(--display);font-weight:500;font-size:24px;color:var(--fg);margin:38px 0 14px}
.article__body a{color:var(--orange-soft);border-bottom:1px solid var(--line)}
.article__body blockquote{border-left:2px solid var(--orange);padding-left:18px;margin:24px 0;font-style:italic;color:var(--fg-dim)}
.backlink{font-family:var(--mono);font-size:13px;color:var(--fg-dim);display:inline-block;margin-bottom:28px;transition:color .2s}
.backlink:hover{color:var(--orange)}

/* ---------- reveal states (no-JS + reduced-motion safe) ---------- */
.js .reveal{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}