:root { --bg:#fafafa; --ink:#18191b; --muted:#686c72; --line:#dedfe2; --link:#2457c5; --soft:#f1f2f3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; }
.wrap { width:min(900px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:fixed; top:-50px; left:16px; z-index:100; padding:8px 11px; background:var(--ink); color:white; }
.skip-link:focus { top:16px; }
.site-header { min-height:62px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { width:max-content; font-size:15px; font-weight:800; text-decoration:none; }
nav { display:flex; gap:19px; }
nav a,.header-links a { color:var(--muted); font:600 11px Consolas,"Courier New",monospace; text-decoration:none; }
nav a:hover,.header-links a:hover { color:var(--ink); }
.header-links { justify-self:end; display:flex; gap:15px; }
.hero { max-width:650px; padding:80px 0 72px; }
.status { display:flex; align-items:center; gap:8px; margin:0 0 20px; color:var(--muted); font:600 11px Consolas,"Courier New",monospace; }
.status span { width:7px; height:7px; background:#26915d; border-radius:50%; }
.hero h1 { max-width:680px; margin:0; font-size:52px; line-height:1.08; letter-spacing:-.045em; }
.hero-copy { max-width:690px; margin:21px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }
.hero-links { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:24px; }
.hero-links a { color:var(--link); font-size:12px; font-weight:700; text-underline-offset:4px; }
.section { padding:58px 0; border-top:1px solid var(--line); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:30px; margin-bottom:27px; }
.section-head h2 { margin:0; font-size:25px; letter-spacing:-.025em; }
.section-head>p { margin:0; color:var(--muted); font:500 11px Consolas,"Courier New",monospace; }
.project-list { border-top:1px solid var(--line); }
.project { display:grid; grid-template-columns:145px 1fr; gap:24px; padding:25px 0; border-bottom:1px solid var(--line); }
.thumb { width:145px; height:98px; overflow:hidden; background:var(--soft); border:1px solid var(--line); }
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.thumb:hover img { transform:scale(1.025); }
.project-main { min-width:0; }
.project-title { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.project-title h3 { margin:0 0 4px; font-size:22px; letter-spacing:-.025em; }
.project-title p { margin:0; color:var(--muted); font:500 10px Consolas,"Courier New",monospace; }
.project-title>a { flex:0 0 auto; color:var(--link); font-size:10px; font-weight:700; text-underline-offset:3px; }
.project-main>p { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.facts { display:flex; flex-wrap:wrap; gap:7px 17px; margin-top:11px; }
.facts span { color:#45494d; font:500 10px Consolas,"Courier New",monospace; }
.project details { margin-top:11px; border-top:1px solid var(--line); }
.project summary { padding-top:9px; color:var(--link); font-size:10px; font-weight:700; cursor:pointer; list-style:none; }
.project summary::-webkit-details-marker { display:none; }
.project summary::after { content:"+"; float:right; }
.project details[open] summary::after { content:"−"; }
.project details div { padding-top:6px; }
.project details p { margin:5px 0; color:var(--muted); font-size:11px; line-height:1.6; }
.small-projects { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.small-projects article { min-height:125px; display:flex; flex-direction:column; padding:19px 0; }
.small-projects article:first-child { padding-right:22px; border-right:1px solid var(--line); }
.small-projects article:last-child { padding-left:22px; }
.small-projects h3 { margin:0 0 6px; font-size:18px; }
.small-projects p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.small-projects a { width:max-content; margin-top:auto; color:var(--link); font-size:10px; font-weight:700; text-underline-offset:3px; }
.skill-list { border-top:1px solid var(--line); }
.skill-list div { display:grid; grid-template-columns:150px 1fr; gap:25px; padding:13px 0; border-bottom:1px solid var(--line); }
.skill-list h3 { margin:0; font:600 11px Consolas,"Courier New",monospace; }
.skill-list p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.skill-list strong { color:var(--ink); }
.note { max-width:670px; margin:18px 0 0 175px; color:var(--muted); font-size:11px; line-height:1.65; }
.timeline { border-top:1px solid var(--line); }
.timeline article { display:grid; grid-template-columns:150px 1fr; gap:25px; padding:19px 0; border-bottom:1px solid var(--line); }
.when { color:var(--muted); font:500 10px Consolas,"Courier New",monospace; }
.timeline h3 { margin:0 0 4px; font-size:18px; }
.timeline .place { margin:0 0 8px; color:var(--ink); font:600 10px Consolas,"Courier New",monospace; }
.timeline article div:last-child>p:not(.place) { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.timeline a { display:inline-block; margin-top:8px; color:var(--link); font-size:9px; font-weight:700; text-underline-offset:3px; }
.hardware-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hardware-list article { display:grid; grid-template-columns:145px 1fr; min-height:130px; border:1px solid var(--line); }
.hardware-list img,.hardware-list video { width:145px; height:130px; object-fit:contain; background:#111; }
.hardware-list article>div:last-child { padding:16px; }
.hardware-list h3 { margin:0 0 7px; font-size:17px; }
.hardware-list p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.hardware-list a { display:inline-block; margin-top:8px; color:var(--link); font-size:9px; font-weight:700; text-underline-offset:3px; }
.education { display:grid; grid-template-columns:150px 1fr; gap:25px; padding:24px 0; border-top:1px solid var(--line); }
.education>span { color:var(--muted); font:500 9px Consolas,"Courier New",monospace; }
.education h2 { margin:0 0 5px; font-size:18px; }
.education p { margin:0; color:var(--muted); font-size:11px; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:25px; padding:29px; color:#fff; background:var(--ink); }
.contact>div:first-child p { margin:0 0 7px; color:#aab0ad; font:500 8px Consolas,"Courier New",monospace; }
.contact h2 { margin:0; font-size:34px; letter-spacing:-.035em; }
.contact>div:last-child { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.contact a,.contact span { color:#b9bfbc; font-size:11px; }
.contact a { color:#fff; font-weight:700; text-underline-offset:3px; }
footer { min-height:67px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:500 9px Consolas,"Courier New",monospace; }
footer p { margin:0; }
footer a { text-underline-offset:3px; }
@media (max-width:650px) {
  .site-header { grid-template-columns:1fr auto; }
  nav { display:none; }
  .hero { padding:58px 0; }
  .hero h1 { font-size:44px; }
  .section-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .project { grid-template-columns:105px 1fr; gap:15px; }
  .thumb { width:105px; height:76px; }
  .facts { display:grid; gap:5px; }
  .hardware-list { grid-template-columns:1fr; }
}
@media (max-width:460px) {
  .wrap { width:min(100% - 30px,820px); }
  .header-links a:first-child { display:none; }
  .hero h1 { font-size:40px; }
  .project { grid-template-columns:1fr; }
  .thumb { width:100%; height:auto; aspect-ratio:16/9; }
  .project-title { flex-direction:column; gap:8px; }
  .small-projects { grid-template-columns:1fr; }
  .small-projects article:first-child { padding-right:0; border-right:0; border-bottom:1px solid var(--line); }
  .small-projects article:last-child { padding-left:0; }
  .skill-list div,.timeline article,.education { grid-template-columns:1fr; gap:7px; }
  .note { margin-left:0; }
  .contact { width:100%; grid-template-columns:1fr; gap:25px; margin-top:15px; padding:27px 20px; }
  footer { padding:18px 0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .thumb img { transition:none; } }