:root{
    --bg:#000000;
    --surface:#0a0a0a;
    --surface-2:#111113;
    --border:#1f1f22;
    --border-soft:#17171a;
    --text:#fafafa;
    --text-muted:#8a8a8e;
    --text-dim:#535357;
    --accent:#e3a857;
    --accent-soft:rgba(227,168,87,0.12);
    --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --max-wide:1080px;
    --max-prose:640px;
    --nav-h:64px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  ::selection{background:var(--accent); color:#000;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  h1,h2,h3,p,dl,dd{margin:0;}
  ul{margin:0; padding:0; list-style:none;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

  .wrap{max-width:var(--max-wide); margin:0 auto; padding:0 1.5rem;}
  .prose{max-width:var(--max-prose);}
  .mono{font-family:var(--mono);}
  .accent{color:var(--accent);}
  .muted{color:var(--text-muted);}

  .eyebrow{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
  }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--nav-h);
    display:flex; align-items:center;
    background:rgba(0,0,0,0.82);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-inner{
    width:100%; max-width:var(--max-wide); margin:0 auto; padding:0 1.5rem;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    font-family:var(--mono); font-weight:500; font-size:.95rem;
    text-decoration:none; color:var(--text); letter-spacing:-.01em;
  }
  .nav-links{
    display:flex; align-items:center; gap:1.75rem;
  }
  .nav-links a{
    position:relative;
    font-family:var(--mono); font-size:.78rem;
    color:var(--text-muted); text-decoration:none;
    padding:.3rem 0;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
    background:var(--accent); transition:right .25s ease;
  }
  .nav-links a:hover{color:var(--text);}
  .nav-links a:hover::after, .nav-links a.active::after{right:0;}
  .nav-links a.active{color:var(--text);}

  .nav-toggle{
    display:none; background:none; border:1px solid var(--border);
    border-radius:4px; color:var(--text); width:36px; height:36px;
    font-family:var(--mono); cursor:pointer;
  }

  @media (max-width:760px){
    .nav-toggle{display:block;}
    .nav-links{
      position:fixed; top:var(--nav-h); left:0; right:0;
      background:#000; border-bottom:1px solid var(--border);
      flex-direction:column; align-items:flex-start; gap:0;
      max-height:0; overflow:hidden; transition:max-height .25s ease;
    }
    .nav-links.open{max-height:400px;}
    .nav-links a{width:100%; padding:1rem 1.5rem; border-bottom:1px solid var(--border-soft);}
    .nav-links a::after{display:none;}
  }

  /* ---------- Layout / routing ---------- */
  main{padding-top:var(--nav-h);}
  main > section{display:none;}
  main > section.is-active{display:block;}
  .page{padding:5rem 0 6rem;}
  @media (max-width:640px){ .page{padding:3rem 0 4rem;} }

  .section-head{margin-bottom:3rem;}
  .section-head h2{
    font-size:1.6rem; font-weight:600; letter-spacing:-.01em; margin-top:.6rem;
  }
  .section-head p{margin-top:.75rem; max-width:520px;}

  /* ---------- Reveal ---------- */
  .reveal-init{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
  .reveal-init.in-view{opacity:1; transform:none;}

  /* ---------- Hero ---------- */
  .hero{padding:7rem 0 5rem;}
  .hero h1{
    font-size:clamp(2.2rem, 6vw, 3.6rem);
    font-weight:700; letter-spacing:-.02em; line-height:1.08;
    margin-top:1.1rem;
  }
  .cursor{
    display:inline-block; color:var(--accent); font-weight:400;
    animation:blink 1s step-end infinite;
  }
  @keyframes blink{50%{opacity:0;}}
  .hero p.sub{
    margin-top:1.5rem; font-size:1.05rem; color:var(--text-muted);
    max-width:520px; line-height:1.65;
  }
  .hero-ctas{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.25rem;}

  .btn{
    font-family:var(--mono); font-size:.82rem;
    padding:.8rem 1.4rem; border:1px solid var(--border); border-radius:4px;
    text-decoration:none; color:var(--text);
    display:inline-flex; align-items:center; gap:.5rem;
    transition:border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .btn:hover{border-color:var(--accent); color:var(--accent);}
  .btn-primary{background:var(--text); color:#000; border-color:var(--text);}
  .btn-primary:hover{background:var(--accent); border-color:var(--accent); color:#000;}

  .stats-grid{
    display:flex; flex-wrap:wrap; gap:2.75rem;
    margin-top:3.5rem; padding-top:2.25rem; border-top:1px solid var(--border);
  }
  .stat-num{
    display:block; font-size:1.7rem; font-weight:600; letter-spacing:-.01em;
  }
  .stat-label{
    display:block; margin-top:.35rem; font-family:var(--mono); font-size:.68rem;
    text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  }

  /* ---------- Home: work preview ---------- */
  .home-block{padding:4.5rem 0; border-top:1px solid var(--border);}
  .preview-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-top:2.5rem;}
  .preview-card{background:var(--surface); padding:1.75rem; text-decoration:none; color:var(--text); transition:background .2s ease;}
  .preview-card:hover{background:var(--surface-2);}
  .preview-card .eyebrow{margin-bottom:.75rem;}
  .preview-card h3{font-size:1.05rem; font-weight:600;}
  .preview-card p{margin-top:.6rem; font-size:.88rem; color:var(--text-muted); line-height:1.55;}
  @media (max-width:760px){ .preview-grid{grid-template-columns:1fr;} }

  /* ---------- About ---------- */
  .about-copy p{margin-bottom:1.3rem; color:var(--text-muted); line-height:1.75; font-size:1rem;}
  .about-copy p:first-of-type{color:var(--text); font-size:1.05rem;}
  .status-line{
    margin-top:2.5rem; padding:1rem 1.25rem; border:1px solid var(--border);
    border-radius:4px; background:var(--surface); font-family:var(--mono);
    font-size:.85rem; color:var(--text-muted);
  }
  .status-line .accent{margin-right:.4rem;}

  /* ---------- Terminal diagram ---------- */
  .term{background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin:1.75rem 0;}
  .term-bar{display:flex; align-items:center; gap:.4rem; padding:.6rem .9rem; background:var(--surface-2); border-bottom:1px solid var(--border);}
  .term-dot{width:8px; height:8px; border-radius:50%; background:var(--text-dim);}
  .term-title{margin-left:.6rem; font-family:var(--mono); font-size:.7rem; color:var(--text-muted);}
  .term-body{
    margin:0; padding:1.1rem 1.25rem; font-family:var(--mono); font-size:.82rem;
    line-height:1.8; color:var(--text); overflow-x:auto; white-space:pre;
  }
  .term-body .arrow{color:var(--accent);}
  .term-note{margin-top:.9rem; font-size:.88rem; color:var(--text-muted); line-height:1.6;}

  /* ---------- Work / case studies ---------- */
  .project{border-top:1px solid var(--border); padding:2rem 0;}
  .project:last-child{border-bottom:1px solid var(--border);}
  .project summary{
    cursor:pointer; list-style:none;
    display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem;
  }
  .project summary::-webkit-details-marker{display:none;}
  .project summary::marker{content:'';}
  .project-title h3{font-size:1.3rem; font-weight:600; margin-top:.5rem;}
  .project-title .dek{margin-top:.35rem; font-size:.9rem; color:var(--text-muted);}
  .chev{
    font-family:var(--mono); color:var(--text-dim); font-size:1.1rem;
    transition:transform .25s ease, color .2s ease; flex-shrink:0; margin-top:.4rem;
  }
  .project[open] .chev{transform:rotate(90deg); color:var(--accent);}
  .project-body{margin-top:1.75rem;}
  .project-body h4{
    font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--accent); margin-bottom:.5rem;
  }
  .project-body .block{margin-bottom:1.5rem; max-width:var(--max-prose);}
  .project-body .block p{color:var(--text-muted); line-height:1.7; font-size:.95rem;}

  .tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;}
  .tag{
    font-family:var(--mono); font-size:.7rem; padding:.32rem .65rem;
    border:1px solid var(--border); border-radius:3px; color:var(--text-muted);
  }

  .lessons{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); margin-top:1rem;
  }
  .lessons > div{background:var(--surface); padding:1.1rem 1.3rem;}
  .lessons dt{
    font-family:var(--mono); font-size:.65rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--accent); margin-bottom:.5rem;
  }
  .lessons dd{font-size:.88rem; line-height:1.6; color:var(--text-muted);}
  @media (max-width:640px){ .lessons{grid-template-columns:1fr;} .project summary{flex-direction:column; gap:.5rem;} }

  /* ---------- Architecture ---------- */
  .arch-block{margin-bottom:3.5rem;}
  .arch-block h3{font-size:1.1rem; font-weight:600;}
  .arch-block .eyebrow{margin-top:.2rem;}

  /* ---------- Journal ---------- */
  .journal-list{border-top:1px solid var(--border);}
  .journal-item{
    padding:1.75rem 0; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start;
  }
  .journal-item h3{font-size:1.05rem; font-weight:600;}
  .journal-item p{margin-top:.5rem; color:var(--text-muted); font-size:.9rem; max-width:520px; line-height:1.6;}
  .journal-tag{
    flex-shrink:0; font-family:var(--mono); font-size:.68rem; color:var(--text-dim);
    border:1px solid var(--border); border-radius:3px; padding:.3rem .6rem; white-space:nowrap;
  }
  .journal-note{margin-top:1rem; font-size:.85rem;}
  @media (max-width:600px){ .journal-item{flex-direction:column;} }

  /* ---------- Timeline ---------- */
  .timeline{position:relative; margin-left:.6rem; padding-left:2rem; border-left:1px solid var(--border);}
  .t-node{position:relative; padding-bottom:2.75rem;}
  .t-node:last-child{padding-bottom:0;}
  .t-node::before{
    content:''; position:absolute; left:-2.09rem; top:.4rem;
    width:9px; height:9px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 4px #000, 0 0 0 5px var(--border);
  }
  .t-year{font-family:var(--mono); color:var(--accent); font-size:.8rem; letter-spacing:.04em;}
  .t-title{font-size:1.15rem; font-weight:600; margin:.4rem 0 .5rem;}
  .t-desc{color:var(--text-muted); max-width:500px; line-height:1.65; font-size:.94rem;}

  /* ---------- Contact ---------- */
  .contact-row{display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid var(--border-soft);}
  .contact-row:first-child{padding-top:0;}
  .contact-row:last-child{border-bottom:none;}
  .contact-row .k{font-family:var(--mono); font-size:.78rem; color:var(--text-dim);}
  .contact-row a{font-family:var(--mono); font-size:.88rem; text-decoration:none; color:var(--text); transition:color .2s ease;}
  .contact-row a:hover{color:var(--accent);}
  .contact-lede{margin-bottom:2rem;}

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--border-soft); padding:2.25rem 0; margin-top:0;
  }
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem;}
  footer p{font-family:var(--mono); font-size:.72rem; color:var(--text-dim);}

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }