* { 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; }

  /* Видимая рамка фокуса для тех, кто ходит по сайту клавиатурой (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', 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', 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', 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', 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', monospace;
    font-size: 13px; white-space: nowrap; z-index: 2; opacity: 0;
    animation: codeFade 14s ease-in-out infinite;
  }
  .cf1 { top: 9%; left: 36%; color: var(--fg); animation-delay: 1.5s; }
  .cf2 { top: 47%; left: 58%; color: var(--accent); font-size: 12px; animation-delay: 5s; }
  .cf3 { bottom: 23%; left: 42%; color: var(--fg); animation-delay: 9.5s; }
  .cf4 { top: 20%; left: 66%; color: var(--accent); animation-delay: 3s; }
  .cf5 { bottom: 36%; left: 10%; color: var(--fg); animation-delay: 7s; }
  .cf6 { bottom: 12%; left: 28%; 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', 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', monospace;
    font-size: 13px; letter-spacing: 3px; color: var(--accent);
    margin-bottom: 20px; text-transform: uppercase;
  }
  h1 {
    font-family: 'Unbounded', 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', 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', sans-serif;
  }

  .skills {
    position: relative;
    background: var(--bg);
    color: var(--fg);
    padding: 70px 8% 90px;
    font-family: 'IBM Plex Sans', sans-serif;
    transition: background 0.4s ease, color 0.4s ease;
  }
  .skills h2 {
    font-family: 'Unbounded', 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', 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', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    margin: 0 0 34px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .timeline-track { position:relative; max-width:640px; padding-left:26px; border-left:2px solid var(--plate-border); }
  .timeline-item { position:relative; padding-bottom:30px; }
  .timeline-item:last-child { padding-bottom:0; }
  .timeline-dot { position:absolute; left:-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', monospace; font-size:12px; letter-spacing:1px; color:var(--accent); margin-bottom:4px; }
  .timeline-text { font-family:'IBM Plex Sans', 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', 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', 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-body h3 { font-family:'Unbounded', sans-serif; font-size:16px; margin:0 0 6px; }
  .card-stack { font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--accent); margin-bottom:14px; }
  .card-desc { font-family:'IBM Plex Sans', 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', 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', 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); }
  .card-btn.placeholder-link { opacity:0.4; font-style:italic; }

  .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', sans-serif; line-height:1.5;
  }
  .modal-panel h3 { font-family:'Unbounded', sans-serif; margin-top:0; }
  .modal-close { position:absolute; top:10px; right: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-bars { display:flex; flex-direction:column; gap:16px; max-width:640px; }
  .skill-row { display:grid; grid-template-columns: 200px 1fr 46px; align-items:center; gap:14px; }
  .skill-name { font-size:13px; opacity:0.9; }
  .skill-track { height:6px; background: var(--plate-border); border-radius:3px; overflow:hidden; }
  .skill-fill { height:100%; width:0%; background: var(--accent); border-radius:3px; transition: width 0.9s cubic-bezier(.2,.8,.2,1); }
  .skill-pct { font-family:'IBM Plex Mono', monospace; font-size:12px; text-align:right; color: var(--accent); }
  .skill-track-planned { height:6px; border:1px dashed var(--plate-border); border-radius:3px; background:none; }
  .skill-pct-planned { font-style:italic; opacity:0.6; color: var(--fg); }
  .skill-planned .skill-name { opacity:0.6; }

  .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', 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', sans-serif; font-size:15px; opacity:0.85; max-width:520px; }
  .contact-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
  .contact-link {
    font-family:'IBM Plex Mono', monospace; font-size:13px;
    padding:10px 18px; border:1px solid var(--plate-border); border-radius:4px;
    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); }
  .contact-link.placeholder-link { opacity:0.4; font-style:italic; }

  .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', 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; }

  /* Планшеты: ссылок в шапке много — чуть сжимаем */
  @media (max-width: 1000px) {
    .nav { padding: 16px 4%; }
    .nav-links { gap: 18px; }
  }

  /* Телефоны */
  @media (max-width: 760px) {
    h1 { font-size: clamp(32px, 10vw, 56px); }
    .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: 320px; 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, .contact { padding-left: 20px; padding-right: 20px; }
    .timeline { padding-left: 20px; padding-right: 20px; }
    .skill-row { grid-template-columns: 1fr auto; gap:6px 12px; }
    .skill-name { grid-column: 1; }
    .skill-pct { grid-column: 2; grid-row: 1; text-align:right; }
    .skill-track, .skill-track-planned { grid-column: 1 / -1; }
    .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; }
    .skill-fill { transition: none; }
  }