* { box-sizing: border-box; }
  html, body { margin:0; padding:0; width: 100%; }
  /* clip (а не hidden) — режет вылезающее вбок, но НЕ ломает sticky-шапку */
  html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 70px; }
  body { overflow-x: hidden; overflow-x: clip; }
  [hidden] { display: none !important; }
  .svg-defs { position: absolute; } /* невидимый SVG с фильтром для фото */

  /* Видимая рамка фокуса для тех, кто ходит по сайту клавиатурой (Tab) */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
  }
  :root {
    --ink: #17140F;
    --paper: #EDE4D2;
    --signal: #A32B1F;
    --works: #3C4A33;
    --brass: #A8763E;
    --bg: var(--ink);
    --fg: var(--paper);
    --accent: var(--brass);
    --grain-dot: rgba(237,228,210,0.04);
    --plate-border: rgba(237,228,210,0.35);
    --plate-bg: rgba(23,20,15,0.5);
  }
  [data-theme="light"] {
    --bg: var(--paper);
    --fg: var(--ink);
    --accent: #7A5225;
    --grain-dot: rgba(23,20,15,0.045);
    --plate-border: rgba(23,20,15,0.25);
    --plate-bg: rgba(237,228,210,0.6);
  }
  body { background: var(--bg); transition: background 0.4s ease; }
  ::selection { background: var(--signal); color: var(--paper); }
  [data-i18n] { transition: opacity 0.3s ease; }

  .nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 6%;
    background: var(--bg);
    border-bottom: 1px solid var(--plate-border);
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
    transition: background 0.4s ease, border-color 0.4s ease;
  }
  .nav-links { display:flex; gap:28px; }
  .nav-links a {
    color: var(--fg); text-decoration:none;
    font-size:13px; letter-spacing:1px; opacity:0.8;
    transition: opacity 0.3s ease, color 0.3s ease;
  }
  .nav-links a:hover { opacity:1; color: var(--accent); }
  .nav-links a { white-space: nowrap; }

  /* Бургер (три полоски) — виден только на телефоне, см. @media внизу */
  .nav-burger {
    display: none;
    width: 34px; height: 32px; padding: 7px 6px;
    background: none; border: 1px solid var(--plate-border); border-radius: 4px;
    cursor: pointer; flex-direction: column; justify-content: space-between;
  }
  .nav-burger span { display:block; height:2px; background: var(--fg); transition: transform .25s ease, opacity .25s ease; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-controls { display:flex; align-items:center; gap:14px; }
  .nav-cta {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
    font-size: 12px; letter-spacing: 0.5px;
    padding: 7px 14px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-cta:hover { background: var(--accent); color: var(--bg); }
  .lang-switch { display:flex; border:1px solid var(--plate-border); border-radius:4px; overflow:hidden; }
  .lang-btn {
    background:none; border:none; cursor:pointer;
    color: var(--fg); opacity:0.55;
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
    font-size:11px; letter-spacing:1px; padding:5px 9px;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .lang-btn.active { opacity:1; background: var(--accent); color: var(--bg); }
  .theme-toggle {
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--plate-border); background:none;
    display:flex; align-items:center; justify-content:center;
    color: var(--fg); cursor:pointer;
  }
  .theme-toggle svg { width:15px; height:15px; }
  .theme-toggle .moon { display:none; }
  [data-theme="light"] .theme-toggle .sun { display:none; }
  [data-theme="light"] .theme-toggle .moon { display:block; }

  .hero {
    position: relative;
    min-height: calc(100vh - 68px);
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: 'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif;
    display: flex;
    align-items: center;
    transition: background 0.4s ease, color 0.4s ease;
  }
  .grain {
    position: absolute; inset:0;
    background-image: radial-gradient(var(--grain-dot) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events:none; z-index:1;
  }
  .colorblock {
    position: absolute; width: 58%; height: 130px;
    background: var(--signal); transform: rotate(-6deg);
    left: -6%; bottom: 10%; z-index: 1; opacity: 0.92;
  }
  .colorblock.works {
    background: var(--works); width: 26%; height: 90px;
    right: -6%; left:auto; bottom:auto; top: 6%;
    transform: rotate(5deg); opacity: 0.85;
  }
  .blueprint { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
  .line {
    fill:none; stroke:var(--fg); stroke-width:1.4;
    stroke-dasharray:1400; stroke-dashoffset:1400;
    animation: draw 18s ease-in-out infinite;
  }
  .line.d2 { animation-delay: 3s; stroke: var(--accent); }
  .line.d3 { animation-delay: 6.5s; }
  @keyframes draw {
    0% { stroke-dashoffset:1400; opacity:0; }
    15% { opacity:0.4; }
    55% { stroke-dashoffset:0; opacity:0.38; }
    85% { opacity:0.12; }
    100% { stroke-dashoffset:-1400; opacity:0; }
  }

  .code-fragment {
    position: absolute;
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
    font-size: 13px; white-space: nowrap; z-index: 2; opacity: 0;
    animation: codeFade 14s ease-in-out infinite;
  }
  /* Блок с фото и именем занимает слева до 720px. max(740px, ...) держит строчки кода
     правее него, чтобы они не наезжали на имя и кнопки. */
  .cf1 { top: 7%; left: max(740px, 52%); color: var(--fg); animation-delay: 1.5s; }
  .cf2 { top: 47%; left: max(740px, 58%); color: var(--accent); font-size: 12px; animation-delay: 5s; }
  .cf3 { bottom: 22%; left: max(740px, 58%); color: var(--fg); animation-delay: 9.5s; }
  .cf4 { top: 20%; left: max(740px, 66%); color: var(--accent); animation-delay: 3s; }
  .cf5 { bottom: 34%; left: max(740px, 63%); color: var(--fg); animation-delay: 7s; }
  .cf6 { bottom: 10%; left: max(740px, 56%); color: var(--fg); font-size: 11px; letter-spacing: 1px; animation-delay: 11.5s; }
  @keyframes codeFade {
    0%, 100% { opacity: 0; transform: translateY(6px); }
    18%, 68% { opacity: 0.42; transform: translateY(0); }
    85% { opacity: 0; transform: translateY(-4px); }
  }


  .content { position: relative; z-index: 3; padding: 0 8%; max-width: 720px; text-align:center; }
  .avatar {
    width: 148px; height: 148px; border-radius: 50%; overflow: hidden;
    margin: 0 auto 22px;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px var(--plate-border);
  }
  .avatar img {
    width:100%; height:100%; object-fit: cover; object-position: center 30%;
    filter: url(#duotone-ink-cream);
    display:block;
    -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
  }
  .hero-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
  .hero-btn {
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:13px; letter-spacing:.5px;
    padding:11px 20px; border:1px solid var(--plate-border); border-radius:4px;
    color:var(--fg); text-decoration:none; background: var(--bg);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .hero-btn:hover { border-color: var(--accent); color: var(--accent); }
  .hero-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .hero-btn.primary:hover { background: transparent; color: var(--accent); }
  .tag {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
    font-size: 13px; letter-spacing: 3px; color: var(--accent);
    margin-bottom: 20px; text-transform: uppercase;
  }
  h1 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 7.5vw, 92px);
    line-height: 0.98; margin: 0; color: var(--fg);
    max-width: 100%; white-space: nowrap;
  }
  h1 .last { color: var(--accent); }

  .about {
    padding: 70px 8% 20px;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.4s ease, color 0.4s ease;
  }
  .about h2 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .about p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif;
  }

  .skills {
    position: relative;
    background: var(--bg);
    color: var(--fg);
    padding: 70px 8% 90px;
    font-family: 'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif;
    transition: background 0.4s ease, color 0.4s ease;
  }
  .skills h2 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .sphere-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
  .sphere-btn {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
    font-size: 12px; letter-spacing:0.5px;
    padding: 9px 16px;
    background:none; border:1px solid var(--plate-border);
    color: var(--fg); opacity:0.6; cursor:pointer; border-radius:3px;
    transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .sphere-btn:hover { opacity:0.9; }

  .timeline {
    padding: 20px 8% 90px;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.4s ease, color 0.4s ease;
  }
  .timeline h2 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 34px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  /* Слева — путь обучения, справа — опыт работы. На узких экранах — друг под другом. */
  .journey-grid { display:grid; grid-template-columns: minmax(0, 640px) minmax(0, 440px); gap:60px; align-items:start; }
  .experience h3 { font-family:'Unbounded', 'Rubik', sans-serif; font-size:17px; margin:0 0 18px; text-transform:uppercase; letter-spacing:1px; }
  .exp-item { border:1px solid var(--plate-border); border-radius:4px; background: var(--plate-bg); padding:16px 18px; margin-bottom:14px; }
  .exp-role { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:15px; font-weight:500; }
  .exp-date { font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; letter-spacing:.5px; color: var(--accent); margin:5px 0 9px; }
  .exp-text { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:13px; line-height:1.55; margin:0; opacity:.85; }
  /* inline-start = «с той стороны, откуда начинается строка»: слева в русском, справа в иврите */
  .timeline-track { position:relative; max-width:640px; padding-inline-start:26px; border-inline-start:2px solid var(--plate-border); }
  .timeline-item { position:relative; padding-bottom:30px; }
  .timeline-item:last-child { padding-bottom:0; }
  .timeline-dot { position:absolute; inset-inline-start:-33px; top:3px; width:11px; height:11px; border-radius:50%; background:var(--accent); }
  .timeline-item.upcoming .timeline-dot { background:var(--bg); border:2px dashed var(--accent); }
  .timeline-date { font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:12px; letter-spacing:1px; color:var(--accent); margin-bottom:4px; }
  .timeline-text { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:14px; }
  .timeline-item.upcoming .timeline-text { opacity:0.6; font-style:italic; }
  .timeline-item.milestone .timeline-dot { background: var(--signal); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--signal); }
  .timeline-item.milestone .timeline-text { font-weight: 500; }

  .projects {
    padding: 70px 8% 90px;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.4s ease, color 0.4s ease;
  }
  .projects h2 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .project-grid {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:22px;
    --photo-h: 160px;
  }
  .project-card {
    position:relative; display:flex; flex-direction:column;
    border:1px solid var(--plate-border); border-radius:4px; overflow:hidden;
    background: var(--plate-bg); transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .project-card:hover { border-color: var(--accent); }
  .project-card.featured { border-color: var(--accent); }

  .card-photo {
    position:relative; height: var(--photo-h); overflow:hidden;
    border-bottom:1px solid var(--plate-border);
    display:flex; align-items:center; justify-content:center;
  }
  .card-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .card-photo img.pos-keyboard { object-position: center 78%; }
  .card-photo.photo-logo { background: #171A20; }
  .card-photo.photo-logo img { width:110px; height:110px; object-fit:contain; }
  /* Терминальная «заглушка» вместо фото — выглядит как часть дизайна, а не как дыра */
  .card-photo.photo-term {
    justify-content:flex-start; padding: 0 22px;
    background-image: radial-gradient(var(--grain-dot) 1px, transparent 1px);
    background-size: 3px 3px;
  }
  .photo-term code { font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:14px; line-height:1.7; color: var(--fg); opacity:.85; }
  .photo-term b { color: var(--accent); font-weight:500; }
  .photo-term i { font-style:normal; opacity:.55; font-size:12px; }

  .card-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
  /* Теги над названием проекта: «Написал сам» / «Сделано с ИИ» и лицензия */
  .card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .card-tag {
    padding:3px 8px;
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase;
    border:1px solid var(--accent); border-radius:3px; color: var(--accent);
  }
  .card-tag.tag-ai { border-style:dashed; border-color: var(--plate-border); color: var(--fg); opacity:.8; }
  .card-tag.tag-study { border-color: var(--plate-border); color: var(--fg); opacity:.85; }
  .card-tag.tag-license { border-color: var(--plate-border); color: var(--fg); opacity:.7; text-transform:none; }
  .card-body h3 { font-family:'Unbounded', 'Rubik', sans-serif; font-size:16px; margin:0 0 6px; }
  .card-stack { font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; color: var(--accent); margin-bottom:14px; }
  .card-desc { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:13px; line-height:1.5; margin:0 0 16px; opacity:.85; }
  .card-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:auto; }
  .card-note { font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; font-style:italic; opacity:.5; }

  /* На компьютере (есть мышь) описание всплывает поверх картинки при наведении.
     На телефоне наведения нет — там описание просто видно под заголовком. */
  @media (hover: hover) and (pointer: fine) {
    .card-desc {
      position:absolute; top:0; left:0; right:0; height: var(--photo-h); margin:0; z-index:2;
      display:flex; align-items:center; justify-content:center; text-align:center;
      padding:18px 22px; background: var(--bg); opacity:0; transition: opacity .3s ease;
      pointer-events:none;
    }
    .project-card:hover .card-desc, .project-card:focus-within .card-desc { opacity:.96; }
  }
  .card-btn {
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px;
    padding:7px 12px; border:1px solid var(--plate-border); border-radius:3px;
    color:var(--fg); background:none; text-decoration:none; cursor:pointer;
    opacity:0.75; transition:opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .card-btn:hover { opacity:1; background:var(--accent); color:var(--bg); border-color:var(--accent); }

  .project-modal { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:20px; }
  .project-modal.open { display:flex; }
  .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); }
  .modal-panel {
    position:relative; z-index:1; background:var(--bg); color:var(--fg);
    border:1px solid var(--accent); border-radius:6px;
    max-width:520px; width:100%; padding:32px 28px;
    font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; line-height:1.5;
  }
  .modal-panel h3 { font-family:'Unbounded', 'Rubik', sans-serif; margin-top:0; }
  .modal-close { position:absolute; top:10px; inset-inline-end:12px; background:none; border:none; color:var(--fg); font-size:24px; cursor:pointer; opacity:0.6; }
  .modal-close:hover { opacity:1; }
  .modal-panel { max-height: calc(100vh - 40px); overflow-y: auto; }
  .modal-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .modal-links:empty { display:none; }
  body.modal-open { overflow: hidden; }

  /* Секции плавно проявляются при прокрутке. Класс .js ставит скрипт в <head>,
     поэтому без JavaScript всё просто видно сразу. */
  .js .reveal { opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .js .reveal.in { opacity:1; transform:none; }
  .sphere-btn.active { opacity:1; background: var(--accent); color: var(--bg); border-color: var(--accent); }
  /* Скилы: три группы по уровню, внутри — «плашки» с названиями */
  .skill-list { display:flex; flex-direction:column; gap:24px; max-width:760px; }
  .skill-level {
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color: var(--accent); margin-bottom:10px;
  }
  .skill-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .skill-chip {
    padding:7px 12px; border:1px solid var(--plate-border); border-radius:3px;
    font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:13px;
  }
  .level-confident .skill-chip { border-color: var(--accent); }
  .level-next .skill-level { color: var(--fg); opacity:.6; }
  .level-next .skill-chip { border-style:dashed; opacity:.65; }

  /* Языки в разделе «Обо мне» */
  .about-langs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
  .about-langs-label {
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color: var(--accent); margin-inline-end:6px;
  }

  /* ---------- Лента (Bluesky + GitHub) ---------- */
  .feed {
    padding: 70px 8% 90px;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.4s ease, color 0.4s ease;
  }
  .feed h2 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .feed-sub { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:15px; opacity:.8; margin:0 0 26px; max-width:620px; }
  .feed-tabs { margin-bottom: 24px; }
  /* overflow-anchor: none — браузер не «держится» за записи ленты, когда она меняется,
     а держится за то, что ниже. Тогда, если ты уже прокрутил к «Связаться»,
     подгрузившаяся лента не утащит этот раздел за край экрана. */
  .feed-list { display:flex; flex-direction:column; gap:14px; max-width:720px; overflow-anchor: none; }

  /* Каждая запись — одна большая ссылка на пост или коммит */
  .feed-item {
    display:block; padding:16px 18px;
    border:1px solid var(--plate-border); border-radius:4px; background: var(--plate-bg);
    color: var(--fg); text-decoration:none;
    transition: border-color .25s ease;
  }
  a.feed-item:hover { border-color: var(--accent); }
  .feed-meta {
    display:flex; align-items:center; gap:10px; margin-bottom:8px;
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; letter-spacing:.5px; opacity:.75;
  }
  .feed-src { display:inline-flex; align-items:center; gap:6px; }
  .feed-src::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--accent); }
  .feed-github .feed-src::before { background: var(--fg); }
  .feed-title { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:14px; font-weight:500; margin:0; }
  .feed-text {
    font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:14px; line-height:1.55; margin:0;
    white-space: pre-line; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; line-clamp:6; overflow:hidden;
  }
  .feed-title + .feed-text { margin-top:4px; opacity:.75; font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:12px; }
  /* Высота задана заранее (240px), ширина считается из пропорций картинки.
     Так место под картинку есть ещё до того, как она скачалась, — страница не прыгает. */
  .feed-img {
    display:block; margin-top:12px; height:240px; width:auto; max-width:100%;
    border-radius:3px; border:1px solid var(--plate-border); object-fit:cover;
  }
  .feed-img.no-size { height:auto; width:100%; max-width:420px; aspect-ratio: 16 / 9; }

  /* Пока данные грузятся — серые «заглушки» той же формы */
  .feed-item.skeleton { min-height:78px; }
  .skeleton .sk { height:10px; border-radius:2px; background: var(--plate-border); margin-bottom:10px; }
  .skeleton .sk:nth-child(1) { width:30%; }
  .skeleton .sk:nth-child(2) { width:85%; }
  .skeleton .sk:nth-child(3) { width:55%; margin-bottom:0; }
  .js .skeleton { animation: skPulse 1.4s ease-in-out infinite; }
  @keyframes skPulse { 0%,100% { opacity:.45; } 50% { opacity:.9; } }

  .feed-empty { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:14px; opacity:.7; margin:0; }
  .feed-foot { max-width:720px; margin-top:18px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .feed-notes:empty, .feed-profiles:empty { display:none; }
  .feed-notes p { margin:0; font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:11px; font-style:italic; opacity:.6; }
  .feed-profiles { display:flex; flex-wrap:wrap; gap:8px; }

  .contact {
    padding: 70px 8% 90px;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.4s ease, color 0.4s ease;
  }
  .contact h2 {
    font-family: 'Unbounded', 'Rubik', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .contact p { font-family:'IBM Plex Sans', 'IBM Plex Sans Hebrew', sans-serif; font-size:15px; opacity:0.85; max-width:520px; }
  /* Блок «Скачать резюме»: заголовок и три кнопки по языкам */
  .cv-box {
    display:inline-flex; flex-direction:column; gap:14px; max-width:100%;
    margin-top:26px; padding:18px 20px;
    background: var(--plate-bg); border:1px solid var(--plate-border);
    border-inline-start:3px solid var(--accent); border-radius:4px;
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace;
  }
  .cv-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
  .cv-title { font-size:14px; letter-spacing:1px; text-transform:uppercase; }
  .cv-head small { font-size:11px; opacity:.65; }
  .cv-langs { display:flex; flex-wrap:wrap; gap:10px; }
  .cv-lang {
    display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
    border:1px solid var(--accent); border-radius:4px;
    color: var(--accent); font-size:14px; text-decoration:none;
    transition: background .2s ease, color .2s ease;
  }
  .cv-lang::after { content:'↓'; }
  /* Залита та версия, на языке которой сейчас открыт сайт */
  .cv-lang.current, .cv-lang:hover { background: var(--accent); color: var(--bg); }
  /* Короткая вспышка рамки, когда сюда привела кнопка «Резюме» из шапки */
  .cv-box.flash { animation: cvFlash 1.4s ease 1; }
  @keyframes cvFlash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    25%, 60% { box-shadow: 0 0 0 3px var(--accent); }
  }
  .contact-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
  .contact-link {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:13px; line-height:1.5;
    padding:10px 18px; border:1px solid var(--plate-border); border-radius:4px;
    background: transparent; max-width:100%; text-align:start;
    color:var(--fg); text-decoration:none; opacity:0.8; cursor:pointer;
    transition: opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .contact-link:hover { opacity:1; background:var(--accent); color:var(--bg); border-color:var(--accent); }
  /* Кнопка Email сразу после копирования */
  .contact-link.copied, .contact-link.copied:hover { opacity:1; background:transparent; color:var(--accent); border-color:var(--accent); }
  .contact-link.copied .copy-icon { display:none; }

  .site-footer {
    padding: 24px 8%;
    background: var(--bg);
    color: var(--fg);
    border-top: 1px solid var(--plate-border);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
    font-family:'IBM Plex Mono', 'IBM Plex Sans Hebrew', monospace; font-size:12px; opacity:0.7;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  .site-footer a { color:var(--fg); text-decoration:none; opacity:0.85; }
  .site-footer a:hover { opacity:1; color:var(--accent); }
  .footer-links { display:flex; gap:18px; }

  /* Планшеты: ссылок в шапке много — чуть сжимаем */
  /* На экранах уже 1100px справа от имени нет места — строчки кода на фоне прячем */
  @media (max-width: 1100px) {
    .code-fragment { display:none; }
  }
  @media (max-width: 1000px) {
    .journey-grid { grid-template-columns: minmax(0, 1fr); gap:44px; }
    .experience { max-width:640px; }
    .nav { padding: 16px 4%; }
    .nav-links { gap: 18px; }
  }

  /* ---------- Иврит: страница целиком идёт справа налево (dir="rtl" ставит script.js) ---------- */
  /* Первый экран не зеркалим: чертёж справа и цветные блоки нарисованы под левое расположение имени */
  .hero { direction: ltr; }
  [dir="rtl"] .hero-actions { direction: rtl; }
  /* Переключатель RU / EN / HE всегда в одном порядке */
  .lang-switch { direction: ltr; }
  /* Чисто английские куски остаются слева направо, иначе скобки и знаки прыгают в начало:
     «Python (Django)» превращается в «(Python (Django». */
  #skills .sphere-btn, #skillList .skill-chip, .photo-term { direction: ltr; }
  /* Текст в ленте (коммиты на английском, посты на любом языке): порядок слов берётся
     из самого текста, а прижат он к той же стороне, что и вся страница */
  .feed-title, .feed-text { unicode-bidi: plaintext; }
  /* Разрядка между буквами хороша для латиницы и кириллицы, а ивритские слова разваливает */
  html[lang="he"] h2, html[lang="he"] h3, html[lang="he"] .tag, html[lang="he"] .nav-links a,
  html[lang="he"] .nav-cta, html[lang="he"] .hero-btn, html[lang="he"] .timeline-date,
  html[lang="he"] .exp-date, html[lang="he"] .card-tag, html[lang="he"] .about-langs-label,
  html[lang="he"] .cv-title, html[lang="he"] .feed-meta, html[lang="he"] .card-note { letter-spacing: 0; }
  html[lang="he"] .card-tag.tag-license, html[lang="he"] .skills h2 { letter-spacing: 1px; }

  /* Телефоны */
  @media (max-width: 760px) {
    h1 { font-size: clamp(32px, 10vw, 56px); }
    .tag { letter-spacing: 1.5px; font-size: 12px; padding: 0 12px; }
    .hero { flex-direction: column; justify-content: center; padding: 60px 0 40px; min-height: calc(100svh - 62px); }
    .colorblock { display:none; }
    .code-fragment { display:none; }

    .nav { padding: 12px 16px; gap: 8px; }
    .nav-burger { display:flex; }
    .nav-controls { gap: 8px; }
    .nav-cta { padding:6px 10px; font-size:11px; }
    .lang-btn { padding: 5px 7px; }
    /* Меню-выпадашка под шапкой */
    .nav-links {
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0;
      background: var(--bg); border-bottom:1px solid var(--plate-border);
      max-height:0; overflow:hidden; visibility:hidden;
      transition: max-height .3s ease, visibility 0s linear .3s;
    }
    .nav.open .nav-links { max-height: 400px; visibility:visible; transition: max-height .3s ease; }
    .nav-links a { padding: 14px 20px; font-size: 14px; border-top:1px solid var(--plate-border); }

    .about, .skills, .projects, .feed, .contact { padding-left: 20px; padding-right: 20px; }
    .feed-item { padding: 14px 15px; }
    .timeline { padding-left: 20px; padding-right: 20px; }
    .modal-panel { padding:26px 20px; }
    .site-footer { padding: 20px; }
  }

  /* Если человек в настройках системы попросил «меньше анимации» — уважаем */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .line { animation: none; stroke-dashoffset:0; opacity:0.22; }
    .code-fragment { animation: none; opacity: 0.3; transform: none; }
    [data-i18n] { transition: none !important; }
    .js .reveal { opacity:1; transform:none; transition:none; }
    .js .skeleton { animation: none; opacity: .6; }
    .cv-box.flash { animation: none; }
  }