/* Общие стили CV и страницы проекта. Цвета — токены на :root, тёмная тема по системной настройке. */
:root {
  --bg: #f3f6f5; --surface: #ffffff; --surface-2: #e9efed;
  --ink: #14201f; --ink-2: #4b5957; --muted: #74827f; --line: #d8e1de;
  --accent: #0f625d; --accent-ink: #ffffff; --accent-soft: #dcedea;
  --st-done: #0ca30c; --st-done-track: #cfeccf;
  --st-wip: #2a78d6; --st-wip-track: #cde2fb;
  --st-todo: #b98a12; --st-todo-track: #f3e6c2;
  --st-cancel: #9aa6a3; --st-cancel-track: #e2e8e6;
  --warn-bg: #fdf3dc; --warn-ink: #6b4e00;
  --f-display: "Geologica", "Golos Text", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1413; --surface: #161d1c; --surface-2: #1f2928;
    --ink: #edf2f0; --ink-2: #b3bfbc; --muted: #84918e; --line: #2a3533;
    --accent: #66c9bd; --accent-ink: #06211f; --accent-soft: #17302d;
    --st-done: #0ca30c; --st-done-track: #143a1c;
    --st-wip: #3987e5; --st-wip-track: #15304f;
    --st-todo: #d9a82a; --st-todo-track: #3a2f12;
    --st-cancel: #6f7b78; --st-cancel-track: #262f2d;
    --warn-bg: #33290f; --warn-ink: #f1d58f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1413; --surface: #161d1c; --surface-2: #1f2928;
  --ink: #edf2f0; --ink-2: #b3bfbc; --muted: #84918e; --line: #2a3533;
  --accent: #66c9bd; --accent-ink: #06211f; --accent-soft: #17302d;
  --st-done: #0ca30c; --st-done-track: #143a1c;
  --st-wip: #3987e5; --st-wip-track: #15304f;
  --st-todo: #d9a82a; --st-todo-track: #3a2f12;
  --st-cancel: #6f7b78; --st-cancel-track: #262f2d;
  --warn-bg: #33290f; --warn-ink: #f1d58f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .g-row:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }
.label { font: 500 13.5px/1.5 var(--f-body); color: var(--muted); letter-spacing: 0; }
code { font: 500 13px/1 var(--f-mono); }

.topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); display: flex; align-items: center; gap: 24px; min-height: 52px; }
.brand { font: 600 15px/1 var(--f-display); color: var(--ink); text-decoration: none; flex: none; }
.anchors { display: flex; gap: 4px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.anchors::-webkit-scrollbar { display: none; }
.anchors a { flex: none; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.anchors a { transition: background-color 0.2s ease, color 0.2s ease; }
.anchors a:hover { background: var(--surface-2); color: var(--ink); }
.anchors a[aria-current="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 8px 8px 2px 2px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 10; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-size: 14px; transition: top 0.2s ease; }
.skip:focus { top: 10px; }

.wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); padding-block: 0 72px; }
section { padding-block: 56px 8px; scroll-margin-top: 60px; }
.sec-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; font-weight: 600; }
.sec-head p { color: var(--ink-2); max-width: 68ch; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.btn { transition: filter 0.2s ease, transform 0.2s cubic-bezier(.2,.8,.2,1); }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.link-arrow { font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; padding: 11px 4px; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow span { transition: transform 0.2s ease; }
.link-arrow:hover span { transform: translateX(3px); }

.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-done { background: var(--st-done); } .dot-wip { background: var(--st-wip); }
.dot-todo { background: var(--st-todo); } .dot-cancel { background: var(--st-cancel); }

.notice { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 12px 16px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 13px; font-size: 14px; }
footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 620px) { .brand { display: none; } .topbar-in { padding-inline: 6px; } }