:root{
    --bg:#0b1a2b; --bg2:#0e2032; --panel:#102534; --panel2:#143049;
    --line:#24394d; --grid:rgba(99,188,205,.05);
    --ink:#eaf1f6; --muted:#92a6b7; --faint:#5e7183;
    --amber:#f5a623; --amber-deep:#cf861a; --cyan:#63bccd;
    --hand:#f5a623;
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0; color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-color:var(--bg);
    /* engineer's graph-paper */
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:27px 27px;
  }
  a{color:inherit; text-decoration:none}
  h1,h2,h3{font-family:"Archivo",system-ui,sans-serif; margin:0; line-height:1.05}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
  .mono{font-family:"IBM Plex Mono",monospace}
  .hand{font-family:"Caveat",cursive; color:var(--hand); line-height:1}

  /* ---------- nav ---------- */
  .nav{position:sticky; top:0; z-index:60;
    background:rgba(11,26,43,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav-inner{display:flex; align-items:center; justify-content:space-between;
    height:62px; max-width:var(--maxw); margin:0 auto; padding:0 28px}
  .brand{font-family:"Archivo"; font-weight:800; font-size:19px}
  .brand .dot{color:var(--amber)}
  .nav-links{display:flex; gap:28px; align-items:center}
  .nav-links a{color:var(--muted); font-size:15px; font-weight:500; transition:color .15s}
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
  .nav-links a.cta{color:var(--bg); background:var(--amber); padding:7px 16px; border-radius:2px; font-weight:600}
  .nav-links a.cta:hover{background:#ffba3d}


  /* ---------- hero ---------- */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
    background:
      radial-gradient(1100px 520px at 80% -10%, rgba(245,166,35,.10), transparent 60%),
      linear-gradient(180deg, var(--bg2), transparent 70%)}
  .hero .contours{position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:repeating-linear-gradient(115deg, transparent 0 58px, rgba(99,188,205,.05) 58px 59px);
    mask-image:linear-gradient(180deg, transparent, #000 40%, #000 80%, transparent)}
  .hero-inner{position:relative; padding:92px 0 0}
  .status{display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:14px; margin-bottom:24px}
  .status .pip{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(245,166,35,.16)}
  h1.title{font-size:clamp(38px,6.4vw,74px); font-weight:800; letter-spacing:-.015em; max-width:16ch}
  h1.title .u{position:relative}
  h1.title .u svg{position:absolute; left:-2%; bottom:-.26em; width:104%; height:.32em; overflow:visible}
  .lede{color:var(--muted); font-size:clamp(17px,2.1vw,21px); line-height:1.5; max-width:60ch; margin:26px 0 0}
  .role-line{font-family:"IBM Plex Mono"; color:var(--cyan); font-size:15px; margin:22px 0 0}
  .actions{display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 0; align-items:center}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:2px; font-weight:600; font-size:15px; transition:all .15s}
  .btn.primary{background:var(--amber); color:var(--bg)}
  .btn.primary:hover,.btn.primary:focus-visible{background:#ffba3d}
  .btn.ghost{border:1px solid var(--line); color:var(--ink)}
  .btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--amber); color:var(--amber)}
  .sig{position:relative; margin:40px 0 0}
  .sig .name{font-family:"Caveat"; font-weight:700; font-size:46px; color:var(--ink); opacity:.92}
  .sig .note{font-family:"Caveat"; font-weight:600; font-size:21px; color:var(--muted); margin-left:14px}

  /* spec bar */
  .specbar{position:relative; margin:64px 0 0; border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(4,1fr)}
  .spec{padding:24px 24px 30px; border-right:1px solid var(--line); position:relative}
  .spec:last-child{border-right:0}
  .spec .fig{font-family:"Archivo"; font-weight:700; font-size:clamp(26px,3.4vw,38px); color:var(--ink)}
  .spec .fig .x{color:var(--amber)}
  .spec .fig .unit{color:var(--muted); font-size:.45em; font-weight:500}
  .spec .cap{color:var(--muted); font-size:13.5px; margin-top:7px; line-height:1.4}
  .spec .scribble{position:absolute; top:-6px; right:14px; font-family:"Caveat"; font-weight:700;
    font-size:20px; color:var(--amber); transform:rotate(-7deg)}
  @media(max-width:760px){
    .specbar{grid-template-columns:repeat(2,1fr)}
    .spec:nth-child(2){border-right:0}
    .spec:nth-child(1),.spec:nth-child(2){border-bottom:1px solid var(--line)}
  }

  /* ---------- section scaffolding ---------- */
  section{padding:88px 0; position:relative}
  .sec-head{margin-bottom:12px}
  .sec-head h2{font-size:clamp(27px,3.6vw,38px); font-weight:700; letter-spacing:-.01em; display:inline-block; position:relative}
  .sec-head h2 .sketch{position:absolute; left:-1%; bottom:-14px; width:102%; height:12px; overflow:visible}
  .sec-sub{color:var(--muted); max-width:62ch; margin:22px 0 0; font-size:17px}
  .divide{border-top:1px solid var(--line)}

  /* ---------- profile ---------- */
  .profile-grid{display:grid; grid-template-columns:1.45fr 1fr; gap:54px; margin-top:40px}
  .profile p{color:#cdd9e2; margin:0 0 18px; max-width:64ch}
  .sidecard{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:22px; position:relative}
  .sidecard .tab{position:absolute; top:-13px; left:18px; background:var(--amber); color:var(--bg);
    font-family:"IBM Plex Mono"; font-size:11.5px; font-weight:500; padding:3px 9px; border-radius:2px}
  .sidecard h3{font-size:14px; font-family:"IBM Plex Sans"; font-weight:600; color:var(--muted); margin:6px 0 14px}
  .sidecard ul{list-style:none; margin:0; padding:0}
  .sidecard li{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
  .sidecard li:last-child{border-bottom:0}
  .sidecard li span{color:var(--muted)}
  @media(max-width:820px){.profile-grid{grid-template-columns:1fr; gap:34px}}

  /* ---------- experience ---------- */
  .job{display:grid; grid-template-columns:200px 1fr; gap:40px; padding:40px 0; border-bottom:1px solid var(--line)}
  .job:last-child{border-bottom:0}
  .job .when{color:var(--muted); font-size:14px; font-family:"IBM Plex Mono"}
  .job .when .now{color:var(--amber)}
  .job .co{color:var(--cyan); font-family:"IBM Plex Mono"; font-size:14px; margin-top:4px}
  .job h3{font-size:22px; font-weight:700; margin-bottom:4px}
  .job .where{color:var(--muted); font-size:14.5px; margin-bottom:16px}
  .job ul{margin:0; padding:0; list-style:none}
  .job li{position:relative; padding-left:20px; margin-bottom:11px; color:#cdd9e2; max-width:70ch}
  .job li::before{content:""; position:absolute; left:0; top:11px; width:7px; height:2px; background:var(--amber)}
  .job li b{color:var(--ink); font-weight:600}
  .scope{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0}
  .chip{font-family:"IBM Plex Mono"; font-size:12.5px; color:var(--muted); border:1px solid var(--line); border-radius:2px; padding:5px 10px}
  .chip b{color:var(--amber); font-weight:500}
  @media(max-width:720px){.job{grid-template-columns:1fr; gap:14px}}

  /* ---------- Volcon program sub-timeline ---------- */
  .vtl{margin:22px 0 6px; position:relative; padding-left:24px}
  .vtl::before{content:""; position:absolute; left:4px; top:7px; bottom:7px; width:2px; background:var(--line)}
  .vtl-item{position:relative; padding-bottom:28px}
  .vtl-item:last-child{padding-bottom:0}
  .vtl-dot{position:absolute; left:-24px; top:4px; width:11px; height:11px; border-radius:50%;
    background:var(--amber); box-shadow:0 0 0 4px var(--bg)}
  .vtl-dot.future{background:var(--bg); border:2px solid var(--amber); width:12px; height:12px; left:-25px}
  .badge{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--amber); border:1px solid var(--amber);
    padding:2px 8px; border-radius:11px; margin-left:9px; vertical-align:middle; font-weight:500; white-space:nowrap}
  .vtl-date{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--cyan); margin-bottom:6px}
  .prog{display:grid; grid-template-columns:1fr 210px; gap:22px; align-items:start}
  .prog h4{font-family:"Archivo",sans-serif; font-size:17px; font-weight:700; color:var(--ink); margin:0 0 7px}
  .prog p{color:#cdd9e2; font-size:14.5px; line-height:1.55; margin:0 0 12px; max-width:60ch}
  .tl-links{display:flex; flex-wrap:wrap; gap:8px}
  .lk{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:5px 10px; border:1px solid var(--line);
    border-radius:2px; color:var(--muted); white-space:nowrap}
  a.lk{color:var(--cyan)}
  a.lk:hover,a.lk:focus-visible{border-color:var(--amber); color:var(--amber)}
  .lk .ext{opacity:.6; font-size:10px}
  .lk.ctx{color:var(--faint)}
  .press-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px}
  .press-row .lbl{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.04em; color:var(--faint); margin-right:2px}
  a.lk.press{color:var(--muted)}
  a.lk.press:hover,a.lk.press:focus-visible{color:var(--amber); border-color:var(--amber)}
  .shot{margin:0}
  .shot-frame{position:relative; aspect-ratio:16/10; min-height:118px; background:var(--bg);
    border:1px solid var(--line); border-radius:3px; overflow:hidden}
  .shot-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2}
  .shot-ph{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; gap:4px; align-items:center;
    justify-content:center; text-align:center; padding:10px; color:var(--faint); font-family:"IBM Plex Mono",monospace; font-size:10.5px}
  .shot-ph code{color:var(--muted)}
  .shot figcaption{font-size:11.5px; color:var(--muted); margin-top:7px; text-align:center}
  @media(max-width:620px){.prog{grid-template-columns:1fr}}

  /* ---------- interactive demos ---------- */
  .lab-intro{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  .demo{margin-top:40px; border:1px solid var(--line); border-radius:5px; background:var(--panel); overflow:hidden; position:relative}
  .demo-head{display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 24px; border-bottom:1px solid var(--line); background:var(--bg)}
  .demo-head .kind{font-family:"IBM Plex Mono"; font-size:13px; color:var(--amber)}
  .demo-head h3{font-size:20px; font-weight:700; margin-top:5px; line-height:1.15}
  .demo-head .live{font-family:"IBM Plex Mono"; font-size:12px; color:var(--cyan); display:inline-flex; align-items:center; gap:7px}
  .demo-head .live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(99,188,205,.18)}
  .demo-body{display:grid; grid-template-columns:1fr 310px; gap:0}
  .canvas-wrap{position:relative; padding:18px 20px; min-height:320px}
  canvas{display:block; width:100%; height:320px}
  .controls{border-left:1px solid var(--line); padding:22px 22px 24px; background:linear-gradient(180deg,var(--panel),var(--panel2))}
  .ctrl{margin-bottom:18px}
  .ctrl label{display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); margin-bottom:7px}
  .ctrl label b{color:var(--ink); font-family:"IBM Plex Mono"; font-weight:500}
  .controls select{width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line);
    border-radius:3px; padding:9px 11px; font-family:"IBM Plex Sans",sans-serif; font-size:14px;
    cursor:pointer; -webkit-appearance:none; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
  .controls select:hover{border-color:var(--amber)}
  input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
    background:var(--line); outline-offset:4px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:17px; height:17px; border-radius:50%;
    background:var(--amber); border:3px solid var(--bg); cursor:pointer; box-shadow:0 0 0 1px var(--amber)}
  input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--amber);
    border:3px solid var(--bg); cursor:pointer}
  .readouts{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-top:4px}
  .readouts div{background:var(--panel); padding:11px 13px}
  .readouts .k{font-size:11px; color:var(--muted); font-family:"IBM Plex Mono"}
  .readouts .v{font-family:"Archivo"; font-weight:700; font-size:19px; color:var(--ink); margin-top:2px}
  .readouts .v small{color:var(--amber); font-size:12.5px; font-weight:600}
  .demo .reset{margin-top:16px; width:100%; justify-content:center; cursor:pointer; border:1px dashed var(--line);
    background:transparent; color:var(--muted); font-family:"IBM Plex Mono"; font-size:12.5px; padding:10px; border-radius:3px}
  .demo .reset:hover,.demo .reset:focus-visible{border-color:var(--amber); color:var(--amber)}
  .demo-note{padding:14px 24px; border-top:1px solid var(--line); color:var(--faint); font-size:13.5px}
  .demo-note b{color:var(--muted); font-weight:500}
  .law{margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:3px;
    background:var(--bg); font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted); text-align:center}
  .law b{color:var(--amber); font-weight:600}
  .scrawl{position:absolute; z-index:5; font-family:"Caveat"; font-weight:700; color:var(--amber); font-size:22px; pointer-events:none}
  .mini-cap{font-family:"Caveat",cursive; color:var(--amber); text-align:center; font-size:18px; margin:2px 0 16px; opacity:.92}
  @media(max-width:820px){
    .demo-body{grid-template-columns:1fr}
    .controls{border-left:0; border-top:1px solid var(--line)}
  }

  /* ---------- foundations ---------- */
  .foundations{margin-top:26px; border:1px solid var(--line); border-radius:5px; background:var(--panel); overflow:hidden}
  .fnd-row{display:grid; grid-template-columns:260px 1fr}
  .fnd-media{background:var(--bg); border-right:1px solid var(--line); min-height:150px; display:flex; align-items:center; justify-content:center; padding:14px}
  .fnd-media video{width:100%; border-radius:2px}
  .fnd-media .ph{color:var(--faint); font-family:"IBM Plex Mono"; font-size:12.5px; text-align:center; line-height:1.6}
  .fnd-body{padding:24px 28px; position:relative}
  .fnd-body .kind{font-family:"IBM Plex Mono"; font-size:13px; color:var(--amber); margin-bottom:8px}
  .fnd-body h3{font-size:18px; font-weight:700; margin-bottom:8px}
  .fnd-body p{color:var(--muted); margin:0; font-size:15px; max-width:60ch}
  .fnd-body .margin-note{position:absolute; right:22px; top:18px; font-family:"Caveat"; font-weight:600; font-size:20px; color:var(--amber); transform:rotate(-5deg)}
  @media(max-width:720px){.fnd-row{grid-template-columns:1fr}.fnd-media{border-right:0; border-bottom:1px solid var(--line)}.fnd-body .margin-note{display:none}}

  /* ---------- toolkit ---------- */
  .kit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:40px}
  .kit-col h3{font-size:15px; font-family:"IBM Plex Sans"; font-weight:600; color:var(--amber); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line)}
  .kit-col ul{list-style:none; margin:0; padding:0}
  .kit-col li{color:#cdd9e2; font-size:15px; padding:5px 0}
  @media(max-width:860px){.kit-grid{grid-template-columns:repeat(2,1fr); gap:26px}}
  @media(max-width:480px){.kit-grid{grid-template-columns:1fr}}
  .creds{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line)}
  .cred{color:var(--muted); font-size:14.5px; border:1px solid var(--line); border-radius:2px; padding:9px 14px}
  .cred b{color:var(--ink); font-weight:600}

  /* ---------- off the clock ---------- */
  .off{background:var(--panel); border:1px solid var(--line); border-radius:6px; margin-top:40px;
    padding:38px 40px; position:relative;
    background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:27px 27px}
  .off p{color:#cdd9e2; max-width:64ch; margin:0 0 22px; font-size:16.5px}
  .off .doodle{position:absolute; right:32px; bottom:30px; font-family:"Caveat"; font-weight:700; color:var(--amber); font-size:24px; transform:rotate(-6deg)}
  .tags{display:flex; flex-wrap:wrap; gap:12px}
  .tag{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--bg);
    border-radius:20px; padding:8px 16px; font-size:14.5px; color:var(--ink)}
  .tag svg{width:18px; height:18px; flex:none}
  @media(max-width:620px){.off{padding:28px 22px}.off .doodle{display:none}}

  /* ---------- contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; margin-top:26px}
  .contact .links{display:flex; flex-direction:column; gap:14px}
  .contact .links a{display:inline-flex; align-items:center; gap:12px; font-size:17px}
  .contact .links a span{color:var(--muted); width:84px; font-family:"IBM Plex Mono"; font-size:13px}
  .contact .links a:hover b,.contact .links a:focus-visible b{color:var(--amber)}
  @media(max-width:720px){.contact-grid{grid-template-columns:1fr; gap:24px}}

  footer{border-top:1px solid var(--line); padding:30px 0; color:var(--faint); font-size:13.5px}
  .foot-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center}
  .foot-inner .sign{font-family:"Caveat"; font-weight:600; font-size:24px; color:var(--muted)}

  :focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:2px}

  /* motion: one deliberate load reveal + sketch draw-in */
  .reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.23s}
  .reveal.d4{animation-delay:.32s}.reveal.d5{animation-delay:.42s}.reveal.d6{animation-delay:.54s}
  @keyframes rise{to{opacity:1; transform:none}}
  .draw path{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); transition:stroke-dashoffset 1s ease}
  .draw.in path{stroke-dashoffset:0}
  @media (prefers-reduced-motion:reduce){
    .reveal{animation:none; opacity:1; transform:none}
    .draw path{stroke-dashoffset:0; transition:none}
  }

/* Shared navigation and the personal Volcon archive. */
[id]{scroll-margin-top:84px}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--amber);color:var(--bg);padding:10px 16px}
.skip-link:focus{top:8px}
.volcon-summary{margin-top:20px!important}
.history-teaser{color:var(--muted);margin:24px 0 12px}
.history-intro{padding-top:64px;padding-bottom:56px}
.history-intro h1{font-size:clamp(36px,6vw,64px);max-width:18ch;margin-top:20px}
.history-context{max-width:68ch;color:#cdd9e2;margin:24px 0 0}
.archive-note{max-width:72ch;color:var(--muted);font-size:14px;border-left:2px solid var(--amber);padding-left:16px;margin:24px 0}
.history-content{padding-top:48px;padding-bottom:64px}
.history-content h2{font-size:30px}
.history-index{display:flex;flex-wrap:wrap;gap:10px 18px;margin:24px 0 32px;font-size:14px;color:var(--cyan)}
.history-index a:hover{text-decoration:underline}
.history-content>.press-row{margin-bottom:36px}
.history-content .vtl{max-width:900px}
.history-content .vtl-item{padding-bottom:44px}
.history-content .prog{grid-template-columns:minmax(0,1fr) 280px;gap:32px}
.history-content .prog h4{font-size:23px}
.history-content .prog p{font-size:16px}
.history-content .shot-frame{aspect-ratio:16/11}

@media(max-width:620px){.history-content .prog{grid-template-columns:1fr}.history-intro{padding-top:40px}.history-content .shot{max-width:400px}}

/* Shared responsive navigation and accessible content. */
.menu-toggle{display:none;background:transparent;color:var(--ink);border:1px solid var(--line);padding:8px 12px;font:inherit;cursor:pointer}
.nav-links a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.nav-inner{gap:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-link{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.demo-note{color:#a5b5c2}
.contact .links a{overflow-wrap:anywhere}
.contact .links a b{min-width:0}
.demos-page #lab{border-top:0;padding-top:60px}
.demos-page .sec-sub{max-width:72ch}
.profile-grid>div>p{color:#cdd9e2;max-width:64ch;margin:0 0 18px}
@media(max-width:900px){
 .nav-inner{height:auto;min-height:62px;flex-wrap:wrap;padding:12px 20px;gap:12px}
 .nav-links{flex-basis:100%;flex-wrap:wrap;gap:10px 20px;padding:8px 0}
 .nav-links a{display:inline-block;font-size:14px;padding:8px 0}
 .has-js .menu-toggle{display:inline-flex;gap:12px;align-items:center}
 .has-js .nav-inner{position:relative;flex-wrap:nowrap;min-height:62px}
 .has-js .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:16px 20px;box-shadow:0 12px 18px #0003}
 .has-js .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .nav-links a.cta{align-self:flex-start;padding:8px 16px}
 [id]{scroll-margin-top:90px}
}
@media(max-width:480px){
 .wrap{padding-left:20px;padding-right:20px}
 .hero-inner{padding-top:48px}
 h1.title{font-size:clamp(32px,9vw,42px);max-width:none}
 .spec{padding:20px 12px}
 .contact .links a{font-size:14px;gap:8px}
 .contact .links a span{width:66px;flex-shrink:0}
 .demo-head{padding:16px;align-items:flex-start}
 .demo-head h3{font-size:18px;line-height:1.25}
 .canvas-wrap{padding:16px 10px}
 .controls{padding:20px 16px}
 section{padding-top:56px;padding-bottom:56px}
}

/* Education: formal study, professional credentials, and selected training. */
.education{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.education-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;margin-top:36px}
.education-degree,.education-abroad{min-width:0;border-top:2px solid var(--cyan);padding-top:22px}
.education .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--cyan);line-height:1.6;margin:0 0 14px}
.education h3{font-size:23px;line-height:1.25}
.education-degree>p:not(.eyebrow),.education-abroad>p:not(.eyebrow){font-size:16px;line-height:1.65;color:#cdd9e2}
.education .education-meta{color:var(--muted)!important;font-size:14px!important;margin:12px 0 18px}
.education-highlights{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.7;margin:18px 0 0}
.education .education-subhead{font-size:19px;margin-top:42px;margin-bottom:20px}
.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.credential-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);padding:24px;min-width:0}
.credential-card h4{font-family:"Archivo",sans-serif;font-size:22px;line-height:1.3;margin:0 0 20px}
.credential-card h4 span{white-space:nowrap}
.credential-card .eyebrow{color:var(--amber)}
.credential-date{font-size:15px;margin:0;color:var(--ink)}
.credential-detail{font-size:13px;color:var(--muted);margin:5px 0 0}
.training-heading>p{font-size:14px;color:var(--muted);margin:-10px 0 22px}
.training-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.training-list li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.training-list h4{font-size:16px;line-height:1.4;font-weight:600;margin:0}
.training-list p{font-size:13px;color:var(--muted);margin:5px 0 0}
.training-list time{font:12px "IBM Plex Mono",monospace;color:var(--cyan);flex-shrink:0}
@media(max-width:720px){.education-grid,.credential-grid{grid-template-columns:1fr}.education-grid{gap:30px}.training-list li{flex-direction:column;gap:8px}.education h3{font-size:21px}.credential-card{padding:20px}}

/* Personal printer projects. */
.printer-projects{margin-top:36px}
.printer-intro .eyebrow{font:12px "IBM Plex Mono",monospace;color:var(--cyan);margin:0 0 12px;line-height:1.5}
.printer-intro h3{font-size:25px;line-height:1.25}
.printer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:24px}
.printer-card{min-width:0;border:1px solid var(--line);border-top:3px solid var(--amber);background:var(--panel);padding:26px}
.printer-label{font:12px "IBM Plex Mono",monospace;line-height:1.6;color:var(--cyan);margin:0 0 12px}
.printer-card h4{font-family:"Archivo",sans-serif;font-size:22px;line-height:1.25;margin:0 0 18px}
.printer-card>p:not(.printer-label){font-size:16px;color:#cdd9e2;line-height:1.65;margin:0 0 22px}
.printer-topics{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.printer-topics li{font:11px "IBM Plex Mono",monospace;line-height:1.5;color:var(--muted);border:1px solid var(--line);padding:5px 8px}
@media(max-width:720px){.printer-grid{grid-template-columns:1fr}.printer-card{padding:22px}.printer-intro h3{font-size:23px}}

.bicycle-build{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;border:1px solid var(--line);border-top:3px solid var(--cyan);background:var(--panel);padding:30px;margin-top:34px}
.bicycle-intro .eyebrow{font:12px "IBM Plex Mono",monospace;color:var(--cyan);margin:0 0 14px}
.bicycle-intro h3{font-size:26px;line-height:1.25;margin:0 0 18px}
.bicycle-intro>p:last-child{font-size:16px;color:#cdd9e2;line-height:1.7;margin:0}
.bicycle-details{margin:0;display:grid;gap:14px}
.bicycle-details>div{padding-bottom:14px;border-bottom:1px solid var(--line)}
.bicycle-details>div:last-child{border-bottom:0;padding-bottom:0}
.bicycle-details dt{font:11px "IBM Plex Mono",monospace;color:var(--muted);line-height:1.5;text-transform:uppercase}
.bicycle-details dd{font-size:15px;line-height:1.5;margin:6px 0 0}
@media(max-width:720px){.bicycle-build{grid-template-columns:1fr;padding:22px;gap:26px}.bicycle-intro h3{font-size:23px}}