/* ============================================================
     TOKENS — bryl-minimal palette, mapped to light + dark themes.
     No external fonts / assets: system stacks only.
     ============================================================ */
  :root{
    --bg:#ffffff;
    --ink:#0a0a0a;
    --gray-50:#fafafa;
    --gray-100:#f5f5f5;
    --gray-200:#e9e9e9;
    --gray-300:#d4d4d4;
    --gray-400:#a3a3a3;
    --gray-500:#737373;
    --gray-600:#525252;

    --font-ui:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    --font-mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
    /* Geist Pixel isn't reliably hostable in every environment — per the design
       system's own fallback rule, display type degrades to uppercase mono rather
       than a substitute decorative font. */
    --font-pixel:var(--font-mono);
    --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;

    --ease:cubic-bezier(0.16,1,0.3,1);
    --shadow-rest:0 8px 22px -14px rgba(0,0,0,.25);
    --shadow-hover:0 18px 36px -20px rgba(0,0,0,.4);

    --sidebar-w:14rem;
    color-scheme: light;
  }
  html.dark{
    --bg:#0c0c0f;
    --ink:#f4f4f5;
    --gray-50:#18181b;
    --gray-100:#1e1e22;
    --gray-200:#2a2a30;
    --gray-300:#3a3a42;
    --gray-400:#8a8a92;
    --gray-500:#a0a0a8;
    --gray-600:#c4c4cc;
    --shadow-rest:0 0 0 1px rgba(255,255,255,.02);
    --shadow-hover:0 0 0 1px rgba(255,255,255,.05);
    color-scheme: dark;
  }

  @keyframes theme-reveal{
    from{ clip-path:circle(0% at var(--theme-origin, 100% 0%)); }
    to{ clip-path:circle(150% at var(--theme-origin, 100% 0%)); }
  }
  ::view-transition-old(root){ animation:none; }
  ::view-transition-new(root){
    animation:theme-reveal .6s var(--ease);
    mix-blend-mode:normal;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    ::view-transition-new(root){ animation:none; }
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-ui);
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background-color .5s var(--ease), color .5s var(--ease);
  }
  ::selection{ background:var(--ink); color:var(--bg); }
  ::-webkit-scrollbar{ width:6px; height:6px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:99px; }

  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  input,textarea{ font:inherit; color:inherit; }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gray-400);
    outline-offset:2px;
    border-radius:4px;
  }

  .link-underline{
    text-decoration:underline;
    text-decoration-color:rgba(10,10,10,.25);
    text-underline-offset:2px;
    transition:text-decoration-color .2s var(--ease);
  }
  html.dark .link-underline{ text-decoration-color:rgba(244,244,245,.25); }
  .link-underline:hover{ text-decoration-color:currentColor; }

  .mono-label{
    font-family:var(--font-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--gray-400);
  }

  .section-number{
    font-family:var(--font-pixel);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--gray-400);
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:1.25rem;
  }
  .section-number::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--gray-200);
  }

  /* ============================================================
     LAYOUT SHELL
     ============================================================ */
  .shell{ display:flex; min-height:100vh; }

  /* Sidebar — desktop */
  .sidebar{
    width:var(--sidebar-w);
    flex-shrink:0;
    border-right:1px solid var(--gray-200);
    padding:1.75rem 1.25rem;
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0; bottom:0;
    overflow-y:auto;
    transition:border-color .5s var(--ease);
  }
  .brand{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:14px;
    letter-spacing:.5px;
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:2.25rem;
  }
  .brand-mark{
    width:20px; height:20px;
    border:1px solid var(--ink);
    border-radius:6px;
    display:grid;
    place-items:center;
    font-size:10px;
  }
  .nav-group{
    border-top:1px solid var(--gray-200);
    padding-top:1rem;
    margin-top:1rem;
  }
  .nav-group:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
  .nav-item{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem .1rem;
    font-size:13.5px;
    color:var(--gray-500);
    transition:color .2s var(--ease);
    position:relative;
  }
  .nav-icon{
    flex-shrink:0;
    opacity:.7;
    transition:opacity .2s var(--ease);
  }
  .nav-item::before{
    content:""; position:absolute; left:-20px; top:50%; width:2px; height:0;
    background:var(--ink); border-radius:1px;
    transform:translateY(-50%);
    transition:height .35s var(--ease);
  }
  .nav-item.active::before{ height:1.25rem; }
  .nav-item:hover{ color:var(--ink); }
  .nav-item:hover .nav-icon{ opacity:1; }
  .nav-item.active{ color:var(--ink); font-weight:500; }
  .nav-item.active .nav-icon{ opacity:1; }
  .nav-arrow{
    opacity:0;
    transform:translateX(-4px);
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    font-family:var(--font-mono);
    font-size:12px;
  }
  .nav-item:hover .nav-arrow,
  .nav-item.active .nav-arrow{
    opacity:1;
    transform:translateX(0);
  }

  .sidebar-foot{
    margin-top:auto;
    padding-top:1.5rem;
    border-top:1px solid var(--gray-200);
  }
  .status-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--ink);
    display:inline-block;
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  .sidebar-social{ display:flex; align-items:center; gap:.75rem; }
  .social-link{ display:grid; place-items:center; width:28px; height:28px; border-radius:6px; border:1px solid transparent; color:var(--gray-400); transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
  .social-link:hover{ color:var(--ink); border-color:var(--gray-200); background:var(--gray-50); }

  /* Main column */
  .main{
    margin-left:var(--sidebar-w);
    flex:1;
    min-width:0;
  }

  /* Top bar */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.5rem;
    height:56px;
    border-bottom:1px solid var(--gray-200);
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(10px);
    transition:border-color .5s var(--ease), background-color .5s var(--ease);
  }
  .topbar-left{ display:flex; align-items:center; gap:.75rem; }
  /* Compound selector so this always outranks the generic .icon-btn rule
     below (same specificity, later source order was silently making the
     hamburger button visible on desktop regardless of screen size). */
  .icon-btn.menu-toggle{ display:none; }
  .topbar-name{ font-size:13.5px; font-weight:500; }
  .topbar-right{ display:flex; align-items:center; gap:.5rem; }

  .icon-btn{
    width:32px; height:32px;
    border:1px solid var(--gray-200);
    border-radius:8px;
    display:grid;
    place-items:center;
    transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
  }
  .icon-btn:hover{ border-color:var(--gray-300); background:var(--gray-50); }
  .icon-btn:active{ transform:scale(.94); }

  /* Mobile drawer overlay */
  .drawer-overlay{
    position:fixed; inset:0; z-index:40;
    background:rgba(10,10,10,.3);
    backdrop-filter:blur(6px);
    opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease);
  }
  .drawer-overlay.open{ opacity:1; pointer-events:auto; }

  /* ============================================================
     CONTENT
     ============================================================ */
  .content{
    max-width:56rem;
    margin:0 auto;
    padding:2.5rem 1.5rem 6rem;
  }
  section{ margin-bottom:3.5rem; scroll-margin-top:80px; }
  .reveal{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* Avatar frame (used in About section) */
  .avatar-frame{
    width:100%;
    aspect-ratio:1 / 1;
    border:1px solid var(--gray-300);
    border-radius:22px;
    background:var(--gray-50);
    display:grid; place-items:center;
    color:var(--gray-400);
    position:relative;
    overflow:hidden;
    z-index:1;
    box-shadow:var(--shadow-rest);
  }
  .avatar-source{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:21px;
    display:block;
    transition:opacity .35s var(--ease);
  }
  .avatar-source.swapping{ opacity:0; }
  .avatar-badge{
    position:absolute; bottom:0; right:0;
    background:var(--ink); color:var(--bg);
    border-radius:99px;
    padding:.35rem .75rem;
    z-index:2;
    border:2px solid var(--bg);
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:9.5px;
    white-space:nowrap;
  }
  .avatar-badge .status-dot{ background:var(--bg); }

  /* About Me — split layout */
  .about-me{
    display:grid;
    grid-template-columns:360px 1fr;
    align-items:center;
    gap:3rem;
  }
  .about-me-image{ width:100%; }
  .about-me-content{ min-width:0; }

  .about-me-name{
    font-family:var(--font-pixel);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:2.1rem;
    line-height:1.15;
    font-weight:700;
    margin:0 0 .65rem;
    position:relative;
  }
  .about-me-role{
    font-size:.9rem;
    font-weight:500;
    font-family:var(--font-mono);
    color:var(--gray-500);
    margin:0 0 1.1rem;
    letter-spacing:-.1px;
    text-transform:uppercase;
  }
  .about-me-bio{
    color:var(--gray-600);
    max-width:34rem;
    margin:0 0 1rem;
    line-height:1.6;
  }
  .about-me-personal{
    color:var(--gray-500);
    max-width:34rem;
    margin:0 0 1.5rem;
    line-height:1.6;
    font-size:.925rem;
  }
  .about-me-links{
    display:flex;
    align-items:center;
    gap:.55rem;
    margin-bottom:1.5rem;
    font-size:.85rem;
    font-weight:500;
  }
  .about-me-links a{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    color:var(--gray-500);
    transition:color .2s var(--ease);
    text-decoration:none;
  }
  .about-me-links a:hover{ color:var(--ink); }
  .about-me-links a:hover span{ text-decoration:underline; }
  .link-sep{ color:var(--gray-300); font-size:.8rem; }
  .about-me-cta{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
  }

  .btn-primary{
    background:var(--ink); color:var(--bg);
    border-radius:8px; padding:.65rem 1.1rem;
    font-size:12.5px; font-weight:600;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    display:inline-flex; align-items:center; gap:.4rem;
  }
  .btn-primary:hover{ opacity:.85; }
  .btn-primary:active{ transform:scale(.97); }
  .btn-ghost{
    border:1px solid var(--gray-300); border-radius:8px;
    padding:.65rem 1.1rem; font-size:12.5px; font-weight:500;
    transition:border-color .2s var(--ease), background-color .2s var(--ease);
    text-decoration:none; color:inherit;
  }
  .btn-ghost:hover{ background:var(--gray-50); border-color:var(--gray-400); }

  /* About — minimal stats row */
  .about-me-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    padding:1.5rem 0;
    border-top:1px solid var(--gray-200);
    margin-top:2.5rem;
  }
  .stat{
    display:flex;
    flex-direction:column;
    gap:.15rem;
  }
  .stat-num{
    font-family:var(--font-pixel);
    font-weight:700;
    font-size:1.4rem;
    letter-spacing:-.5px;
  }
  .stat-lbl{
    font-size:.8rem;
    color:var(--gray-500);
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:.3px;
  }

  /* About — tech marquee */
  .about-marquee{ margin-top:1.5rem; }

  /* Cards grid generic */
  .card{
    border:1px solid var(--gray-200);
    border-radius:12px;
    padding:1.25rem;
    background:var(--bg);
    box-shadow:var(--shadow-rest);
    transition:box-shadow .35s var(--ease), transform .42s var(--ease), border-color .2s var(--ease);
  }
  .card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); border-color:var(--gray-300); }

  /* Focus list (used in Experience, Services) */
  .focus-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
  .focus-list li{ display:flex; justify-content:space-between; font-size:13px; padding-bottom:.6rem; border-bottom:1px solid var(--gray-200); }
  .focus-list li:last-child{ border-bottom:none; padding-bottom:0; }
  .focus-list span.mono-label{ color:var(--gray-400); }
  .tech-marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
  .tech-track{ display:flex; gap:.75rem; width:max-content; animation:scrollTracks 30s linear infinite; }
  .tech-track:hover{ animation-play-state:paused; }
  .tech-item{ display:flex; align-items:center; gap:.55rem; padding:.55rem 1rem; border:1px solid var(--gray-200); border-radius:10px; font-size:14px; white-space:nowrap; transition:border-color .25s; }
  .tech-item img{ display:block; flex-shrink:0; transition:filter .25s; }
  html:not(.dark) .tech-item img{ filter:brightness(0); }
  html.dark .tech-item img{ filter:brightness(0) invert(1); }
  .tech-item:hover img{ filter:none !important; }
  @keyframes scrollTracks{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

  /* Blog — list rows, open a modal with the full post */
  .blog-list{ position:relative; border-top:1px solid var(--gray-200); }
  .blog-list-halftone{
    position:absolute;
    right:-20px; top:-30px;
    width:190px; height:190px;
    background-image:radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
    background-size:9px 9px;
    opacity:.9;
    -webkit-mask-image:radial-gradient(circle at 80% 20%, black, transparent 70%);
            mask-image:radial-gradient(circle at 80% 20%, black, transparent 70%);
    pointer-events:none;
  }
  html.dark .blog-list-halftone{ opacity:.4; }

  .blog-entry{
    position:relative;
    display:block;
    width:100%;
    text-align:left;
    padding:1.35rem .25rem;
    border-bottom:1px solid var(--gray-200);
    transition:padding-left .3s var(--ease);
  }
  .blog-entry:hover{ padding-left:.65rem; }
  .blog-entry:focus-visible{ outline:2px solid var(--gray-400); outline-offset:-2px; border-radius:6px; }
  .blog-entry-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem; }
  .blog-entry-title{ font-size:15px; font-weight:600; margin:0; }
  .blog-entry-meta{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.75px; color:var(--gray-400); white-space:nowrap; flex-shrink:0; }
  .blog-entry-desc{ margin:0; font-size:13px; color:var(--gray-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

  .modal-body p{ font-family:var(--font-serif); font-size:1.0625rem; color:var(--gray-600); line-height:1.75; margin:0 0 1rem; }
  .modal-body p:last-child{ margin-bottom:0; }

  /* Skills — list rows (blog-style), open a modal with full detail */
  .skills-list{ position:relative; border-top:1px solid var(--gray-200); }
  .skills-list-halftone{
    position:absolute;
    left:-20px; bottom:-30px;
    width:190px; height:190px;
    background-image:radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
    background-size:9px 9px;
    opacity:.9;
    -webkit-mask-image:radial-gradient(circle at 20% 80%, black, transparent 70%);
            mask-image:radial-gradient(circle at 20% 80%, black, transparent 70%);
    pointer-events:none;
  }
  html.dark .skills-list-halftone{ opacity:.4; }

  .skill-entry{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:.85rem;
    width:100%;
    text-align:left;
    padding:1.35rem .85rem;
    border-bottom:1px solid var(--gray-200);
    background:var(--bg);
    border-radius:8px;
    transition:background .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
    animation:skillFadeIn .5s var(--ease) both;
  }
  .skill-entry:nth-child(1){ animation-delay:.04s; }
  .skill-entry:nth-child(2){ animation-delay:.08s; }
  .skill-entry:nth-child(3){ animation-delay:.12s; }
  .skill-entry:nth-child(4){ animation-delay:.16s; }
  .skill-entry:nth-child(5){ animation-delay:.20s; }
  .skill-entry:nth-child(6){ animation-delay:.24s; }
  .skill-entry:nth-child(7){ animation-delay:.28s; }
  .skill-entry:nth-child(8){ animation-delay:.32s; }
  @keyframes skillFadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .skill-entry::before{
    content:""; position:absolute;
    left:0; top:1.1rem; bottom:1.1rem;
    width:3px; border-radius:0 3px 3px 0;
    transition:top .3s var(--ease), bottom .3s var(--ease), opacity .3s var(--ease);
    opacity:.65;
  }
  .skill-entry[data-skill="frontend"]::before{ background:#4f9cf5; }
  .skill-entry[data-skill="backend"]::before{ background:#e46651; }
  .skill-entry[data-skill="database"]::before{ background:#a772cb; }
  .skill-entry[data-skill="devops"]::before{ background:#50c878; }
  .skill-entry[data-skill="langs"]::before{ background:#f5a623; }
  .skill-entry[data-skill="api"]::before{ background:#1db4b4; }
  .skill-entry[data-skill="version-control"]::before{ background:#e05ccb; }
  .skill-entry[data-skill="problem-solving"]::before{ background:#6c8cff; }
  .skill-entry:hover::before{ top:.4rem; bottom:.4rem; opacity:1; }
  .skill-entry:hover{
    background:var(--gray-50);
    box-shadow:var(--shadow-rest);
    transform:scale(1.01);
  }
    html.dark .skill-entry:hover{ background:rgba(255,255,255,.03); }

  .skill-entry-icon{
    flex-shrink:0;
    width:30px;
    height:30px;
    border-radius:8px;
    background:var(--gray-100);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray-500);
    transition:color .2s var(--ease), background .2s var(--ease);
    margin-top:2px;
  }
  .skill-entry:hover .skill-entry-icon{
    background:var(--gray-200);
    color:var(--ink);
  }
  .skill-entry-body{ flex:1; min-width:0; }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:.5s;
    animation-timing-function:var(--ease);
  }
  .skill-entry:focus-visible{ outline:2px solid var(--gray-400); outline-offset:-2px; border-radius:6px; }
  .skill-entry-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem; }
  .skill-entry-title{ font-size:15px; font-weight:600; margin:0; }
  .skill-entry-meta{
    font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.75px;
    color:var(--gray-400); white-space:nowrap; flex-shrink:0;
    display:inline-flex; align-items:center; gap:.35rem;
  }
  .skill-entry-meta::before{
    content:""; display:inline-block;
    width:5px; height:5px; border-radius:50%;
    background:currentColor; opacity:.5;
  }
  .skill-entry-desc{ margin:0; font-size:13px; color:var(--gray-500); line-height:1.5; }

  .skill-entry-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
  .skill-tag{
    font-size:10.5px;
    font-family:var(--font-mono);
    color:var(--gray-500);
    background:var(--gray-100);
    padding:2px 7px;
    border-radius:4px;
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .skill-entry:hover .skill-tag{ background:var(--gray-200); color:var(--ink); }

  /* Reused inside the skill modal */
  .skill-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
  .skill-row:last-child{ margin-bottom:0; }
  .skill-name{ width:8rem; flex-shrink:0; font-size:12.5px; color:var(--gray-600); }
  .skill-track{ flex:1; height:5px; background:var(--gray-100); border-radius:99px; overflow:hidden; }
  .skill-fill{ height:100%; background:linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 70%, var(--accent,#4f9cf5))); border-radius:99px; width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1); }
  .skill-pct{ font-family:var(--font-mono); font-size:10.5px; color:var(--gray-400); width:2rem; text-align:right; }

  .tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
  .tag{
    border:1px solid var(--gray-300);
    border-radius:99px;
    padding:.2rem .6rem;
    font-family:var(--font-mono);
    font-size:9.5px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--gray-500);
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .tag:hover{ border-color:var(--gray-400); color:var(--ink); }
  .tag-row-label{
    display:block; width:100%;
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.65px;
    color:var(--gray-400); margin-bottom:.25rem;
  }

  /* Skill detail modal */
  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(10,10,10,.3);
    backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem;
    opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease);
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  html.dark .modal-overlay{ background:rgba(0,0,0,.5); }
  .modal-panel{
    width:100%; max-width:26rem;
    max-height:85vh;
    overflow-y:auto;
    background:var(--bg);
    border:1px solid var(--gray-200);
    border-radius:16px;
    padding:1.75rem;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.35);
    transform:scale(.95); opacity:0;
    transition:transform .2s var(--ease), opacity .2s var(--ease);
    position:relative;
  }
  .modal-overlay.open .modal-panel{ transform:scale(1); opacity:1; }
  .modal-close{
    position:absolute; top:1rem; right:1rem;
    width:28px; height:28px; border-radius:8px;
    border:1px solid var(--gray-200);
    display:grid; place-items:center;
    color:var(--gray-500);
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .modal-close:hover{ border-color:var(--gray-400); color:var(--ink); }
  .modal-title{ font-size:17px; font-weight:700; margin:.4rem 1.75rem .75rem 0; letter-spacing:-.2px; }
  .modal-desc{ font-size:13.5px; color:var(--gray-600); line-height:1.7; margin:0 0 1.35rem; }
  .modal-bars{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.35rem; }

  /* Projects */
  /* Resume */
  .resume-card{ position:relative; overflow:hidden; }
  .resume-card::after{
    content:"";
    position:absolute;
    right:-30px; bottom:-30px;
    width:180px; height:180px;
    background-image:radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
    background-size:9px 9px;
    opacity:.85;
    -webkit-mask-image:radial-gradient(circle at center, black, transparent 72%);
            mask-image:radial-gradient(circle at center, black, transparent 72%);
    pointer-events:none;
  }
  html.dark .resume-card::after{ opacity:.4; }

  .resume-eyebrow{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:1.25rem; position:relative; }
  .static-dot{ width:4px; height:4px; border-radius:50%; background:var(--gray-400); display:inline-block; margin-right:.4rem; }
  .resume-updated{ display:inline-flex; align-items:center; }

  .resume-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.35rem; position:relative; }
  .resume-title{ font-size:1.3rem; margin:0 0 .5rem; font-weight:700; letter-spacing:-.3px; }
  .resume-sub{ margin:0; color:var(--gray-500); font-size:13.5px; max-width:26rem; }
  .resume-actions{ display:flex; gap:.6rem; flex-wrap:wrap; flex-shrink:0; }

  .resume-glance{ display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; position:relative; padding-top:1.1rem; border-top:1px solid var(--gray-200); }
  .glance-item{ display:flex; flex-direction:column; gap:.35rem; }
  .glance-item .val{ font-size:13px; font-weight:500; }

  .modal-panel-wide{ max-width:44rem; }
  .resume-preview-frame{
    border:1px solid var(--gray-200); border-radius:10px; overflow:hidden;
    height:min(65vh, 560px); background:var(--gray-50); margin-top:.5rem;
  }
  .resume-preview-frame iframe{ width:100%; height:100%; border:0; display:block; }

  @media (max-width:640px){
    .resume-glance{ grid-template-columns:1fr 1fr; }
  }

  /* Print — resume-friendly output */
  @media print{
    .sidebar, .topbar, .drawer-overlay, .modal-overlay, .stack-nav, .stack-dots, footer.page-foot{ display:none !important; }
    .main{ margin-left:0; }
    .content{ max-width:100%; padding:0; }
    section{ margin-bottom:1.25rem; break-inside:avoid; }
    .stack-halftone, .skills-list-halftone, .resume-card::after{ display:none; }
    .card{ box-shadow:none; }
  }

  .section-header-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:1.25rem;
    gap:1rem;
  }
  .section-header-row .label{
    font-family:var(--font-pixel);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--gray-400);
  }
  .all-projects-link{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.75px;
    color:var(--gray-500);
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    flex-shrink:0;
    transition:color .2s var(--ease), transform .2s var(--ease);
  }
  .all-projects-link:hover{ color:var(--ink); }
  .all-projects-link .glyph{ transition:transform .2s var(--ease); }
  .all-projects-link:hover .glyph{ transform:translate(2px,-2px); }

  .stack-wrap{
    position:relative;
    padding:2.5rem 0 1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
  }
  .stack-halftone{
    position:absolute;
    top:-20px; right:-10px;
    width:200px; height:200px;
    background-image:radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
    background-size:9px 9px;
    opacity:.9;
    -webkit-mask-image:radial-gradient(circle at center, black, transparent 72%);
            mask-image:radial-gradient(circle at center, black, transparent 72%);
    pointer-events:none;
    z-index:0;
  }
  html.dark .stack-halftone{ opacity:.4; }

  .stack{
    position:relative;
    width:min(360px, 88vw);
    height:440px;
    z-index:1;
    outline:none;
  }
  .stack:focus-visible{ outline:2px solid var(--gray-400); outline-offset:8px; border-radius:20px; }

  .stack-card{
    position:absolute;
    top:50%; left:50%;
    width:100%;
    min-height:330px;
    border:1px solid var(--gray-200);
    border-radius:20px;
    background:var(--bg);
    padding:1.5rem 1.35rem;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-hover);
    transition:transform .5s var(--ease), opacity .5s var(--ease), box-shadow .35s var(--ease);
    will-change:transform;
  }
  .stack-card.is-front{ box-shadow:0 24px 48px -20px rgba(0,0,0,.35); }
  html.dark .stack-card.is-front{ box-shadow:0 0 0 1px var(--gray-300); }

  .stack-hit{
    position:absolute; inset:0;
    z-index:5;
    border-radius:inherit;
    pointer-events:none;
  }
  .stack-card:not(.is-front) .stack-hit{ pointer-events:auto; cursor:pointer; }
  .stack-card:not(.is-front) .stack-content a{ pointer-events:none; }

  .stack-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1.1rem; }
  .ribbon-badge{
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--ink); color:var(--bg);
    border-radius:99px;
    padding:.3rem .7rem;
    font-family:var(--font-mono);
    font-size:9.5px;
    text-transform:uppercase;
    letter-spacing:.75px;
    font-weight:600;
  }
  .ribbon-badge .bracket{ opacity:.5; }

  .app-row{ display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; }
  .app-icon{
    width:44px; height:44px; flex-shrink:0;
    border:1px solid var(--gray-300);
    border-radius:12px;
    background:var(--gray-50);
    display:grid; place-items:center;
    color:var(--ink);
  }
  .stack-card h3{ font-size:15.5px; font-weight:700; margin:0; letter-spacing:-.2px; }

  .stack-desc{ color:var(--gray-500); font-size:13px; line-height:1.6; margin:0 0 1.1rem; flex:1; }

  .stack-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:auto; }
  .store-btn{
    display:inline-flex; align-items:center; gap:.45rem;
    background:var(--ink); color:var(--bg);
    border-radius:10px;
    padding:.55rem .85rem;
    font-family:var(--font-ui);
    font-size:12px; font-weight:600;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    position:relative; z-index:6;
  }
  .stack-card.is-front .store-btn{ pointer-events:auto; }
  .store-btn:hover{ opacity:.85; }
  .store-btn:active{ transform:scale(.96); }

  .stack-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:2;
  }
  .stack-nav.prev{ left:-4px; }
  .stack-nav.next{ right:-4px; }

  .stack-dots{ display:flex; justify-content:center; gap:.4rem; margin-top:1.5rem; }
  .stack-dots button{
    width:6px; height:6px; border-radius:99px;
    background:var(--gray-300);
    transition:background-color .2s var(--ease), width .3s var(--ease);
  }
  .stack-dots button.active{ background:var(--ink); width:18px; }

  @media (max-width:640px){
    .stack{ width:min(300px, 86vw); height:400px; }
    .stack-nav{ display:none; }
  }
  .chip{
    background:var(--ink); color:var(--bg);
    border-radius:99px; padding:.15rem .55rem;
    font-family:var(--font-mono); font-size:9px;
    text-transform:uppercase; letter-spacing:.5px;
  }

  /* Experience timeline */
  .timeline-list{
    position:relative;
    border-top:1px solid var(--gray-200);
  }
  .timeline-item{
    display:grid;
    grid-template-columns:auto 1.5rem 1fr;
    gap:0;
    padding:1.35rem 0;
    border-bottom:1px solid var(--gray-200);
    animation:tlFadeIn .5s var(--ease) both;
  }
  .timeline-item:last-child{ border-bottom:none; }
  @keyframes tlFadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .tl-icon-box{
    width:32px; height:32px;
    flex-shrink:0;
    border:1px solid var(--gray-300);
    border-radius:9px;
    background:var(--gray-50);
    display:grid; place-items:center;
    color:var(--ink);
    transition:background .25s var(--ease), border-color .25s var(--ease);
    z-index:1;
  }
  .timeline-item:hover .tl-icon-box{
    background:var(--gray-100);
    border-color:var(--gray-400);
  }
  html.dark .timeline-item:hover .tl-icon-box{
    background:var(--gray-100);
    border-color:var(--gray-400);
  }

  .tl-line{
    position:relative;
    display:flex;
    justify-content:center;
  }
  .tl-line::before{
    content:'';
    width:1px;
    background:var(--gray-200);
    position:absolute;
    top:0; bottom:0;
  }
  .tl-line::after{
    content:'';
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gray-300);
    border:2px solid var(--bg);
    position:absolute;
    top:0.75rem;
    transition:background .25s var(--ease);
  }
  .timeline-item:hover .tl-line::after{
    background:var(--gray-500);
  }
  .timeline-item:first-child .tl-line::after{
    background:#50c878;
  }

  .tl-content{ min-width:0; }

  .tl-head{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:.35rem;
  }
  .tl-date{
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--gray-400);
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .tl-badge{
    font-family:var(--font-mono);
    font-size:8.5px;
    text-transform:uppercase;
    letter-spacing:.65px;
    padding:.1rem .5rem;
    border-radius:99px;
    background:var(--badge-clr, #50c878);
    color:#fff;
    line-height:1.5;
  }
  html.dark .tl-badge{ color:#000; }

  .tl-title{
    font-size:14.5px;
    margin:0 0 .15rem;
    font-weight:600;
  }
  .tl-role{
    font-size:12.5px;
    color:var(--gray-500);
    margin:0 0 .5rem;
  }
  .tl-desc{
    margin:0;
    font-size:13px;
    color:var(--gray-600);
    line-height:1.5;
  }
  .tl-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    margin-top:.7rem;
  }

  /* Services */
  .section-intro{ font-size:13.5px; color:var(--gray-500); margin:-.75rem 0 1.25rem; max-width:32rem; }
  /* Services grid — asymmetric bento layout */
  .services-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:.9rem; }
  .services-grid > .service-card:first-child{ grid-row:span 2; }
  .services-grid > .service-card:last-child{ grid-column:1 / -1; }
  .service-card{ display:flex; flex-direction:column; }
  .service-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
  .service-icon{ width:38px; height:38px; flex-shrink:0; border:1px solid var(--gray-300); border-radius:10px; background:var(--gray-50); display:grid; place-items:center; color:var(--ink); }
  .services-grid > .service-card:first-child .service-icon{ background:var(--gray-100); border-color:var(--gray-400); }
  .service-card .num{ font-family:var(--font-mono); font-size:10px; color:var(--gray-400); }
  .services-grid > .service-card:first-child .num{ color:var(--ink); }
  .service-card h3{ font-size:14.5px; margin:0 0 .4rem; font-weight:600; }
  .service-card p{ margin:0 0 .9rem; font-size:13px; color:var(--gray-500); flex:1; }
  .service-card .tag-row{ margin-top:0; margin-bottom:1.1rem; }
  .service-link{
    font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--gray-500); display:inline-flex; align-items:center; gap:.35rem; margin-top:auto;
    transition:color .2s var(--ease);
  }
  .service-link:hover{ color:var(--ink); }
  .service-link .glyph{ transition:transform .2s var(--ease); }
  .service-link:hover .glyph{ transform:translate(2px,-2px); }

  /* GitHub section */
  .github-section{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; }

  /* GitHub activity card */
  .github-card{ width:100%; max-width:56rem; position:relative; overflow:hidden; }
  .gh-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:1.1rem; }
  .gh-top .ribbon-badge{ transition:border-color .2s var(--ease), color .2s var(--ease); }
  .gh-top .ribbon-badge:hover{ color:var(--ink); border-color:var(--gray-500); }

  .gh-stats-row{
    display:grid; grid-template-columns:repeat(3,1fr);
    border:1px solid var(--gray-200); border-radius:12px; overflow:hidden;
    margin:1.1rem 0 1.4rem;
  }
  .gh-stats-row .stat-cell{ padding:1rem .75rem; border-right:1px solid var(--gray-200); }
  .gh-stats-row .stat-cell:last-child{ border-right:none; }
  .gh-stats-row .stat-value{ font-size:1.35rem; font-family:var(--font-pixel); font-weight:700; letter-spacing:-.5px; }
  .gh-stats-row .stat-label{ display:block; margin-top:.3rem; font-size:12px; }

  .gh-cal-wrap{ overflow-x:auto; padding-bottom:.35rem; margin:0 -.1rem; }
  .gh-cal-wrap::-webkit-scrollbar{ height:5px; }
  .gh-cal-inner{ display:inline-flex; flex-direction:column; min-width:100%; }
  .gh-months{ display:flex; gap:3px; margin-left:34px; margin-bottom:.35rem; height:10px; position:relative; }
  .gh-months span{
    font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--gray-400); position:absolute; top:0; white-space:nowrap;
  }
  .gh-cal-body{ display:flex; gap:6px; }
  .gh-weekdays{ display:flex; flex-direction:column; gap:3px; width:28px; flex-shrink:0; }
  .gh-weekdays .mono-label{ height:10px; line-height:10px; font-size:9px; letter-spacing:.3px; }
  .gh-cal{ display:flex; gap:3px; }
  .gh-week{ display:flex; flex-direction:column; gap:3px; }
  .gh-day{
    width:10px; height:10px; border-radius:2.5px;
    background:var(--gray-100);
    border:1px solid var(--gray-200);
    flex-shrink:0;
  }
  .gh-day[data-level="1"]{ background:var(--ink); opacity:.22; border-color:transparent; }
  .gh-day[data-level="2"]{ background:var(--ink); opacity:.45; border-color:transparent; }
  .gh-day[data-level="3"]{ background:var(--ink); opacity:.7; border-color:transparent; }
  .gh-day[data-level="4"]{ background:var(--ink); opacity:1; border-color:transparent; }
  .gh-day[data-empty="1"]{ background:transparent; border-color:transparent; }

  .gh-foot{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
    margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--gray-200);
  }
  .gh-legend{ display:flex; align-items:center; gap:.3rem; }
  .gh-legend .gh-day{ width:9px; height:9px; }
  .gh-error{ font-size:12.5px; color:var(--gray-500); }

  .github-section-title{ font-size:1.25rem; font-weight:700; margin:0 0 .5rem; letter-spacing:-.3px; position:relative; }
  .github-section-sub{ margin:0 0 1.4rem; color:var(--gray-500); font-size:13.5px; position:relative; max-width:24rem; }

  footer.page-foot{
    border-top:1px solid var(--gray-200);
    padding:1.5rem;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.5rem;
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:1023px){
    .sidebar{
      transform:translateX(-100%);
      z-index:50;
      background:var(--bg);
      width:min(80vw,18rem);
      transition:transform .35s var(--ease);
      padding:1.5rem 1.25rem;
    }
    .sidebar.open{ transform:translateX(0); }
    .main{ margin-left:0; }
    .icon-btn.menu-toggle{ display:grid; position:relative; z-index:60; }
    .topbar{ z-index:45; }
    .services-grid{ grid-template-columns:1fr 1fr; }
    .services-grid > .service-card:first-child{ grid-row:auto; }
    .services-grid > .service-card:last-child{ grid-column:auto; }
    .nav-item{ padding:.6rem .1rem; min-height:44px; }
    .sidebar-foot{ padding-top:1rem; }
    .section-number{ margin-bottom:.85rem; }
  }
  @media (max-width:768px){
    section{ margin-bottom:2.25rem; }
    .content{ padding:1.5rem 1rem 3.5rem; }
    .about-me{ grid-template-columns:1fr; gap:2rem; }
    .about-me-image{ max-width:260px; margin:0 auto; }
    .about-me-name{ font-size:1.7rem; }
    .about-me-cta{ flex-direction:column; }
    .about-me-cta .btn-primary,
    .about-me-cta .btn-ghost{ width:100%; justify-content:center; min-height:44px; }
    .tag{ padding:.25rem .65rem; font-size:12px; }
    .skill-entry{ padding:1rem .65rem; gap:.65rem; flex-direction:column; }
    .skill-entry-icon{ width:26px; height:26px; }
    .skill-entry-tags{ gap:.3rem; }
    .skill-tag{ font-size:9.5px; }
    .blog-entry{ padding:1rem .25rem; }
    .blog-entry .entry-icon{ display:none; }
    .entry-left{ gap:.35rem; }
    .pagination{ gap:.3rem; }
    .pagination .page-btn{ min-width:34px; min-height:34px; font-size:13px; }
    .timeline-item{
      grid-template-columns:auto 1rem 1fr;
    }
    .tl-line{ display:none; }
    .tl-icon-box{ width:28px; height:28px; }
    .tl-date{ font-size:12px; }
    .footer-social{ gap:1rem; }
    .github-section-sub{ font-size:13px; }
  }
  @media (max-width:640px){
    .about-me{ gap:1.5rem; }
    .about-me-image{ max-width:200px; }
    .about-me-name{ font-size:1.4rem; }
    .about-me-role{ font-size:.8rem; }
    .about-me-links{ flex-wrap:wrap; gap:.4rem; font-size:.8rem; }
    .about-me-stats{ gap:1rem; padding:1.25rem 0; }
    .stat-num{ font-size:1.2rem; }
    .content{ padding:1.25rem .85rem 3rem; }
    .services-grid{ grid-template-columns:1fr; }
    .services-grid > .service-card:first-child{ grid-row:auto; }
    .services-grid > .service-card:last-child{ grid-column:auto; }
    .gh-stats-row{ grid-template-columns:1fr; }
    .gh-stats-row .stat-cell{ border-right:none !important; border-bottom:1px solid var(--gray-200); }
    .gh-stats-row .stat-cell:last-child{ border-bottom:none; }
    .gh-foot{ justify-content:flex-start; }
    section{ margin-bottom:1.75rem; }
    .section-head{ margin-bottom:1.1rem; }
    .section-number{ font-size:11.5px; margin-bottom:.65rem; }
    .section-head h2{ font-size:1.15rem; }
    .subtitle{ font-size:12.5px; }
    .pagination .page-btn{ min-width:32px; min-height:32px; font-size:12px; padding:0; }
    footer.page-foot{ flex-direction:column; align-items:center; text-align:center; gap:.35rem; padding:1.25rem; font-size:12.5px; }
    .blog-entry .entry-meta{ font-size:12px; gap:.5rem; }
    .service-card{ padding:1.25rem; }
    .service-title{ font-size:1rem; }
    .stacks-marquee{ gap:.5rem; }
  }
  @media (max-width:480px){
    .about-me-name{ font-size:1.2rem; }
    .about-me-bio{ font-size:14px; }
    .about-me-personal{ font-size:13px; }
    .about-me-cta{ gap:.5rem; }
    .about-me-image{ max-width:180px; }
    .about-me-links{ gap:.35rem; font-size:.75rem; }
    .content{ padding:1rem .65rem 2.5rem; }
    section{ margin-bottom:1.5rem; }
    .card{ padding:1rem; }
    .timeline-item{ grid-template-columns:auto 1fr; }
    .tl-line{ display:none; }
    .tl-icon-box{ width:24px; height:24px; }
    .tab-btn{ padding:.3rem .55rem; font-size:11.5px; }
    .footer-social{ gap:.65rem; }
    .service-card{ padding:1rem; }
  }