/* Self-hosted (was Google Fonts): every page needs Inter, and a cross-origin
   stylesheet + font fetch on every single navigation added noticeable lag,
   worse on pages mixing Latin and Cyrillic text since that pulled two
   separate subset files. Same-origin local files remove that round trip. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --ink: #111111;
  --ink-secondary: #111111;
  --hairline: rgba(17,17,17,.14);
  --accent: #111111;
  --accent-ink: #ffffff;
  --nav-w: 220px;
  --font-display: 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-contrast: more) {
  :root { --hairline: currentColor; --ink-secondary: var(--ink); }
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: auto; }
html, body { background: var(--bg); margin: 0; }
body {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
::selection { background-color: var(--ink); color: #fff; }
a { color: inherit; text-decoration: none; }

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .92;
  font-size: clamp(3.25rem, 12vw, 9rem);
  color: var(--ink);
}
.side-nav-link {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

/* ---------- Side nav: persistent list of sections, always top-left ---------- */
.side-nav {
  position: fixed;
  top: 0; left: 0;
  width: var(--nav-w);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 50;
  background: var(--bg);
}
.side-nav-link {
  font-family: var(--font-display); font-weight: 700;
  font-size: .85rem; letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
}
.side-nav-link:hover { opacity: .55; }
.side-nav-link.active { text-decoration: underline; text-underline-offset: 3px; }

.lang-toggle { display: flex; align-items: center; gap: .5rem; margin-top: 6px; }
.lang-btn {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-secondary);
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; padding: 0; margin: 0;
  cursor: pointer;
}
.lang-btn.active { color: var(--ink); }

/* Page content sits to the right of the fixed side nav */
.content-with-nav { margin-left: var(--nav-w); padding: 28px 32px 96px; min-height: 100vh; }

@media (max-width: 720px) {
  /* A fixed 220px nav doesn't fit a ~390px phone screen the way it does
     desktop, so it can't stay fixed here without either eating most of the
     width or sitting on top of scrolled content and covering it. Instead
     the nav scrolls away normally at the top of the page, and the text
     block below starts where the longest nav label ends, not at the nav's
     own left edge. */
  .side-nav { position: static; width: auto; }
  .content-with-nav {
    margin-left: 0;
    padding: 24px 20px 60px 120px;
  }
}

/* ---------- Bio block (About / Skills pages): plain stacked lines, no cards ---------- */
.bio-block { max-width: 520px; margin-top: 6vh; margin-left: clamp(40px, 10vw, 140px); }
@media (max-width: 720px) {
  .bio-block { margin: 0; width: 100%; max-width: none; }
}
.bio-block p {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink);
}
.bio-block p:last-child { margin-bottom: 0; }
.bio-name-line { margin-bottom: 40px !important; }
.bio-name-line:not(:first-child) { margin-top: 40px; }
.skill-line { margin-bottom: 0 !important; }
.bio-langs { margin-bottom: 20px; }
.bio-langs:last-child { margin-bottom: 0; }
.bio-langs p { margin-bottom: 0; }
.bio-lang-label { margin-bottom: 4px !important; }

/* ---------- Case list (Cases page): click a title to reveal it ---------- */
.case-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
}
.case-item:not(:first-child) .case-toggle { margin-top: 20px; }
.case-toggle:hover { opacity: .6; }
.case-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.case-item.open .case-panel { grid-template-rows: 1fr; }
.case-panel-inner { overflow: hidden; min-height: 0; padding-top: 20px; }
.case-item.open .case-panel-inner { padding-bottom: 20px; }
@media (prefers-reduced-motion: reduce) {
  .case-panel { transition: none; }
}
.case-star { font-size: .7em; margin-left: 1px; }
.bio-block a:hover { opacity: .6; }