:root{
    --paper:#F7F8F6;
    --ink:#15171C;
    --ink-soft:#5A6070;
    --cobalt:#2740D6;
    --cobalt-soft:#E6E9FB;
    --verify:#0E8A5F;
    --line:#DDDFDA;
    --max:1080px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{font-size:17.5px;scroll-behavior:smooth;scroll-padding-top:96px}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:1rem;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--cobalt);color:#fff}
  a{color:inherit}
  .textlink{
    color:var(--cobalt);text-decoration:none;
    border-bottom:1px solid var(--cobalt);
    transition:opacity .15s ease;
  }
  .textlink:hover,.textlink:focus-visible{opacity:.7}

  /* ---------- nav: floating glass pill ---------- */
  .navwrap{
    position:sticky;top:14px;z-index:60;
    display:flex;justify-content:center;
    padding:0 1rem;margin-top:1.2rem;
    pointer-events:none;
  }
  nav{
    pointer-events:auto;
    display:flex;align-items:center;gap:1.6rem;
    background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(21,23,28,.1);
    border-radius:999px;
    padding:.5rem .6rem .5rem 1.3rem;
    box-shadow:0 10px 30px -18px rgba(21,23,28,.35);
  }
  nav .name{font-family:'Instrument Serif',serif;font-size:1.15rem;text-decoration:none;padding-right:.4rem}
  nav ul{display:flex;gap:.25rem;list-style:none}
  nav ul a{
    font-family:'IBM Plex Mono',monospace;font-size:.76rem;text-transform:lowercase;
    text-decoration:none;color:var(--ink-soft);
    padding:.45rem .85rem;border-radius:999px;
    transition:color .2s ease, background .2s ease;
  }
  nav ul a:hover,nav ul a:focus-visible{color:var(--cobalt);background:var(--cobalt-soft)}
  nav ul a.active{color:#fff;background:var(--cobalt)}

  /* ---------- fixed 3D background canvas ---------- */
  .hero-wrap{position:relative}
  #bg3d{
    position:fixed;inset:0;z-index:0;pointer-events:none;
  }
  .hero-wrap,section,.contact,footer{position:relative;z-index:1}
  header.hero{
    max-width:var(--max);margin:0 auto;
    padding:4.5rem 1.5rem;
    display:grid;grid-template-columns:1.35fr 1fr;gap:3.5rem;align-items:center;
    position:relative;z-index:1;
  }
  .hero h1{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(2.4rem,5.4vw,4rem);
    line-height:1.08;
    position:relative;
  }
  .hero h1 em{font-style:italic;color:var(--cobalt)}
  .scanline{
    position:absolute;left:0;top:0;height:100%;width:2px;
    background:var(--cobalt);opacity:0;
    animation:scan 1.6s .3s ease-in-out forwards;
  }
  @keyframes scan{
    0%{opacity:.9;left:0}
    90%{opacity:.9;left:100%}
    100%{opacity:0;left:100%}
  }
  .stamp{
    display:inline-flex;align-items:center;gap:.5rem;
    margin-top:1.6rem;
    font-family:'IBM Plex Mono',monospace;font-size:.78rem;
    border:1px solid var(--cobalt);color:var(--cobalt);
    background:rgba(247,248,246,.8);
    padding:.35rem .75rem;border-radius:3px;
    opacity:0;transform:translateY(4px);
    animation:appear .5s 1.9s ease-out forwards;
  }
  @keyframes appear{to{opacity:1;transform:none}}
  .hero p.lede{
    margin-top:1.5rem;max-width:48ch;color:var(--ink-soft);font-size:1.02rem;
  }
  .hero .meta{
    margin-top:2.2rem;display:flex;gap:2.2rem;flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-soft);
  }
  .hero .meta span b{display:block;color:var(--ink);font-weight:500;margin-bottom:.15rem}

  /* portrait as analyzed sample — floats gently in 3D */
  .sample{position:relative;justify-self:end;max-width:340px;width:100%;perspective:900px}
  .sample .frame{
    position:relative;border:1px solid var(--ink);
    background:#fff;padding:10px 10px 0;
    transform-style:preserve-3d;
    animation:float 7s ease-in-out infinite;
    box-shadow:0 24px 50px -28px rgba(21,23,28,.35);
  }
  @keyframes float{
    0%,100%{transform:rotateX(2deg) rotateY(-4deg) translateY(0)}
    50%{transform:rotateX(-2deg) rotateY(4deg) translateY(-8px)}
  }
  .sample img{display:block;width:100%;height:auto;filter:saturate(.92)}
  .sample .corner{position:absolute;width:14px;height:14px;border-color:var(--cobalt);border-style:solid}
  .sample .tl{top:-5px;left:-5px;border-width:2px 0 0 2px}
  .sample .tr{top:-5px;right:-5px;border-width:2px 2px 0 0}
  .sample .bl{bottom:-5px;left:-5px;border-width:0 0 2px 2px}
  .sample .br{bottom:-5px;right:-5px;border-width:0 2px 2px 0}
  .sample figcaption{
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-soft);
    padding:.6rem .2rem .7rem;display:flex;justify-content:space-between;gap:1rem;
  }
  .sample figcaption .ok{color:var(--ink-soft)}

  /* ---------- sections ---------- */
  section{max-width:var(--max);margin:0 auto;padding:4rem 1.5rem}
  .eyebrow{
    font-family:'Press Start 2P',monospace;font-size:.6rem;color:var(--cobalt);
    text-transform:uppercase;letter-spacing:.08em;line-height:1.6;
    display:flex;align-items:center;gap:.75rem;margin-bottom:2.2rem;
  }
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
  h2{
    font-family:'Instrument Serif',serif;font-weight:400;
    font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2;margin-bottom:1.2rem;
  }

  /* about */
  .about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
  .about-grid p+p{margin-top:1rem}
  .quote{
    border-left:2px solid var(--cobalt);padding:.2rem 0 .2rem 1.2rem;
    font-family:'Instrument Serif',serif;font-style:italic;font-size:1.15rem;line-height:1.5;
  }
  .quote cite{
    display:block;margin-top:.6rem;font-family:'IBM Plex Mono',monospace;
    font-style:normal;font-size:.72rem;color:var(--ink-soft);
  }

  /* ---------- bento grid ---------- */
  .bento{
    display:grid;gap:1.1rem;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:164px;
  }
  .cell{
    border:1px solid var(--line);background:#fff;
    padding:1.4rem 1.5rem;text-decoration:none;
    display:flex;flex-direction:column;gap:.5rem;
    border-radius:10px;overflow:hidden;position:relative;
    transform-style:preserve-3d;will-change:transform;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .cell:hover,.cell:focus-visible{
    border-color:var(--cobalt);
    box-shadow:0 20px 40px -24px rgba(39,64,214,.45);
  }
  .cell .path{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink-soft)}
  .cell .path b{color:var(--cobalt);font-weight:500}
  .cell h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.35rem;line-height:1.15}
  .cell p{color:var(--ink-soft);font-size:.88rem;flex:1;overflow:hidden}
  .cell .foot{
    display:flex;justify-content:space-between;align-items:center;
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-soft);
  }
  .cell .lang::before{content:"● ";color:var(--cobalt)}

  /* bento spans */
  .span-2x2{grid-column:span 2;grid-row:span 2}
  .span-2x1{grid-column:span 2}
  .span-1x2{grid-row:span 2}

  /* featured cell */
  .cell.featured{background:var(--ink);border-color:var(--ink);color:#E7E9EF}
  .cell.featured h3{color:#fff;font-size:1.8rem}
  .cell.featured p{color:#9AA1B2}
  .cell.featured .path{color:#7A8194}
  .cell.featured .path b{color:#AAB6FF}
  .cell.featured .foot{color:#7A8194}
  .cell.featured .lang::before{color:#5CE0A5}
  .cell.featured:hover{border-color:var(--cobalt)}

  /* stats cell */
  .cell.stat{align-items:flex-start;justify-content:center;background:var(--cobalt-soft);border-color:transparent}
  .cell.stat .big{font-family:'Instrument Serif',serif;font-size:2.6rem;line-height:1;color:var(--cobalt)}
  .cell.stat .lbl{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink-soft)}
  .cell.stat:hover{border-color:var(--cobalt)}

  /* view-all cell */
  .cell.more{justify-content:center;align-items:center;text-align:center;border-style:dashed}
  .cell.more span{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--cobalt)}
  .cell.more:hover{background:var(--cobalt-soft)}

  /* skills: logo chips */
  .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .skills h4{
    font-family:'IBM Plex Mono',monospace;font-size:.75rem;font-weight:500;
    color:var(--ink-soft);text-transform:lowercase;margin-bottom:1rem;
  }
  .chips{display:flex;flex-wrap:wrap;gap:.6rem}
  .chip{
    display:inline-flex;align-items:center;gap:.55rem;
    background:#fff;border:1px solid var(--line);border-radius:8px;
    padding:.5rem .8rem;font-size:.85rem;font-weight:500;
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .chip img{width:20px;height:20px;display:block}
  .chip:hover{
    border-color:var(--cobalt);transform:translateY(-2px);
    box-shadow:0 12px 22px -16px rgba(39,64,214,.5);
  }

  /* contact */
  .contact{background:var(--ink);color:#E7E9EF}
  .contact-inner{max-width:var(--max);margin:0 auto;padding:4.5rem 1.5rem}
  .contact h2{color:#fff}
  .contact p{color:#9AA1B2;max-width:48ch}
  .links{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
  .links a{
    display:inline-flex;align-items:center;gap:.6rem;
    font-family:'IBM Plex Mono',monospace;font-size:.8rem;text-decoration:none;
    border:1px solid #3A4051;color:#E7E9EF;padding:.55rem 1rem;border-radius:3px;
    transition:border-color .15s,color .15s,transform .15s;
  }
  .links a svg{width:16px;height:16px;fill:currentColor;flex:none}
  .links a:hover,.links a:focus-visible{border-color:var(--cobalt);color:#AAB6FF;transform:translateY(-2px)}

  /* contact form */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
  .cform{display:flex;flex-direction:column;gap:1rem}
  .cform label{
    font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:#9AA1B2;
    display:flex;flex-direction:column;gap:.4rem;
  }
  .cform input,.cform textarea{
    background:#1D2027;border:1px solid #3A4051;color:#E7E9EF;
    padding:.75rem .9rem;border-radius:6px;
    font-family:'Inter',system-ui,sans-serif;font-size:.92rem;
    transition:border-color .2s ease;
    width:100%;
  }
  .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--cobalt)}
  .cform textarea{min-height:130px;resize:vertical}
  .cform button{
    align-self:flex-start;cursor:pointer;
    background:var(--cobalt);color:#fff;border:1px solid var(--cobalt);
    font-family:'IBM Plex Mono',monospace;font-size:.82rem;
    padding:.7rem 1.5rem;border-radius:6px;
    transition:background .2s ease, transform .2s ease;
  }
  .cform button:hover,.cform button:focus-visible{background:#3B54F0;transform:translateY(-2px)}
  .cform button:disabled{opacity:.6;cursor:default;transform:none}
  .form-status{font-family:'IBM Plex Mono',monospace;font-size:.75rem;min-height:1.2em}
  .form-status.ok{color:#5CE0A5}
  .form-status.err{color:#FF8A8A}

  footer{
    background:var(--ink);color:#5A6070;
    font-family:'IBM Plex Mono',monospace;font-size:.7rem;
    padding:1.6rem 1.5rem 2.2rem;border-top:1px solid #23262E;
  }
  footer .inner{
    max-width:var(--max);margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  }
  .socials{display:flex;gap:1.1rem;align-items:center}
  .socials a{color:#7A8194;display:inline-flex;transition:color .15s,transform .15s}
  .socials a svg{width:18px;height:18px;fill:currentColor}
  .socials a:hover,.socials a:focus-visible{color:#AAB6FF;transform:translateY(-2px)}

  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

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

  @media (max-width:900px){
    header.hero{grid-template-columns:1fr;gap:2.5rem}
    .sample{justify-self:start;max-width:300px}
    .about-grid{grid-template-columns:1fr}
    .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:186px}
    .span-2x2{grid-column:span 2;grid-row:span 2}
    .skills{grid-template-columns:1fr 1fr}
    .contact-grid{grid-template-columns:1fr}
    nav ul{gap:.1rem}
  }
  @media (max-width:560px){
    .bento{grid-template-columns:1fr;grid-auto-rows:auto}
    .span-2x2,.span-2x1,.span-1x2{grid-column:auto;grid-row:auto}
    .cell{min-height:160px}
    .skills{grid-template-columns:1fr}
    footer .inner{justify-content:center;text-align:center}
  }
  @media (prefers-reduced-motion:reduce){
    .scanline{display:none}
    .stamp{animation:none;opacity:1;transform:none}
    .sample .frame{animation:none}
    .links a:hover,.socials a:hover{transform:none}
    html{scroll-behavior:auto}
  }