:root{
  --mask:#1e64a8;      /* синяя паяльная маска */
  --mask-deep:#144877;
  --silk:#f3f5ef;      /* шелкография */
  --tin:#b8bdb4;       /* лужёные площадки */
  --copper:#a8743f;    /* дорожки */
  --led:#e2483a;       /* светодиод */
  --paper:#fbfbf8;
  --ink:#1d2420;
  --muted:#5d665f;
  --line:#dfe3dc;
  --measure:68ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--mask);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--copper)}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
img,svg{max-width:100%;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* шапка */
.top{background:var(--mask-deep);color:var(--silk)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--silk);text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.01em}
.logo:hover{color:var(--silk)}
.logo svg{width:30px;height:30px}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--tin);text-decoration:none;padding:6px 10px;border-radius:4px;font-size:15px}
.nav a:hover{color:var(--silk);background:rgba(255,255,255,.06)}
.nav a[aria-current=page]{color:var(--silk);box-shadow:inset 0 -2px 0 var(--copper)}

/* главный экран: дорожки сходятся в одну точку пайки */
.hero{background:var(--mask);color:var(--silk);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.025em;margin:0 0 18px;font-weight:800}
.hero p{max-width:44ch;color:#d9e6f2;margin:0;font-size:18px}
.traces{width:100%;height:auto}
.traces .t{fill:none;stroke:var(--copper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.traces .via{fill:var(--mask);stroke:var(--tin);stroke-width:2.5}
.traces .pad{fill:var(--tin)}
.traces .joint{fill:#e7e9e4}
@media (prefers-reduced-motion:no-preference){
  .traces .t{stroke-dasharray:420;stroke-dashoffset:420;animation:route 1.6s ease-out forwards}
  .traces .t:nth-of-type(2){animation-delay:.12s}.traces .t:nth-of-type(3){animation-delay:.24s}
  .traces .t:nth-of-type(4){animation-delay:.36s}.traces .t:nth-of-type(5){animation-delay:.48s}
  .traces .joint{opacity:0;animation:glow .5s 1.7s ease-out forwards}
}
@keyframes route{to{stroke-dashoffset:0}}
@keyframes glow{to{opacity:1}}

/* содержимое */
main{padding:48px 0 72px}
.page-head{max-width:var(--measure);margin-bottom:32px}
.page-head h1{font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
.page-head p{color:var(--muted);margin:0}
h2{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:0 0 16px}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.prose{max-width:var(--measure)}
.prose h2{margin-top:36px}
.prose p{margin:0 0 1em}

/* «на столе сейчас» — как этикетка на плате */
.bench{border:2px solid var(--mask);border-radius:2px;padding:22px 24px;position:relative}
.bench::before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;border-radius:50%;background:var(--led);box-shadow:0 0 0 3px var(--paper)}
.bench h2{margin-top:4px}
.bench p{margin:0 0 12px}
.bom{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:14px;color:var(--muted);margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.bom li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}

/* список записей */
.log{list-style:none;margin:0;padding:0}
.log li{padding:14px 0;border-bottom:1px solid var(--line)}
.log time{display:block;color:var(--muted);font-size:14px}
.log a{font-weight:600;text-decoration:none;color:var(--ink)}
.log a:hover{color:var(--mask);text-decoration:underline}
.log p{margin:4px 0 0;color:var(--muted);font-size:15px}

/* проекты */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 28px}
.project figure{margin:0 0 12px;background:var(--mask);border-radius:3px;overflow:hidden}
.project h2{font-size:21px;margin:0 0 6px}
.project p{margin:0;color:var(--muted)}
.state{display:inline-block;font-size:14px;margin-top:8px;color:var(--ink)}
.state::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--tin)}
.state.on::before{background:var(--led)}
.state.done::before{background:#3d9a62}

/* галерея */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery figure{margin:0}
.gallery .ph{aspect-ratio:4/3;background:var(--mask);border-radius:3px;display:grid;place-items:center;overflow:hidden}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:6px}

.foot{border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot .wrap{padding-top:22px;padding-bottom:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}
  .traces{max-width:420px}
  .cols{grid-template-columns:1fr;gap:40px}
  .projects{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}