/* Portfolio V3 global application navigation.
   Source of truth: TheLabJournal's 48px chrome, 32px control cadence,
   neutral WebSeal zinc states and the journal's dedicated mobile browse UI.
   Scope everything to #portfolio-nav-root to preserve archive/resume layout. */
#portfolio-nav-root{
  --pn-bg:#202024;--pn-ink:#f4f4f5;--pn-muted:#a1a1aa;
  --pn-inset:#18181b;--pn-hover:#333338;--pn-border:#3f3f46;
  --pn-hairline:#333338;--pn-shadow:#09090b;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:12px;line-height:1.4;text-transform:lowercase;
  color:var(--pn-ink);
}
:root[data-theme="light"] #portfolio-nav-root{
  --pn-bg:#fff;--pn-ink:#18181b;--pn-muted:#52525b;--pn-inset:#fafafa;
  --pn-hover:#f4f4f5;--pn-border:#d4d4d8;--pn-hairline:#e4e4e7;
  --pn-shadow:#e4e4e7;
}
#portfolio-nav-root *{box-sizing:border-box}
#portfolio-nav-root a{color:inherit;text-decoration:none}
#portfolio-nav-root button{font:inherit;cursor:pointer}
#portfolio-nav-root svg{display:block;width:16px;height:16px;flex:none}
#portfolio-nav-root :is(button,a,input):focus-visible{
  outline:2px solid var(--pn-muted);outline-offset:2px;
}
#portfolio-nav-root [hidden]{display:none!important}
#portfolio-nav-root .pf-nav-skip{
  position:fixed;top:-100px;left:20px;z-index:110;
  background:var(--pn-bg);border:1px solid var(--pn-border);padding:9px;
}
#portfolio-nav-root .pf-nav-skip:focus{top:10px}
#portfolio-nav-root .pf-nav-header{
  position:fixed;inset:0 0 auto;z-index:50;height:48px;isolation:isolate;
  background:var(--pn-bg);border-bottom:1px solid var(--pn-border);
  box-shadow:0 1px 0 var(--pn-shadow);
}
#portfolio-nav-root .pf-nav-dither{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  /* Exact journal header ink/composite; canvas goes over the opaque bar
     and strictly behind unchanged brand/buttons, not behind the background. */
  color:#71717a;opacity:.34;pointer-events:none;user-select:none;
  contain:strict;image-rendering:auto;
  mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
}
#portfolio-nav-root .pf-nav-inner{
  width:min(100%,1344px);height:100%;margin:0 auto;
  display:flex;align-items:center;gap:8px;padding:0 20px;
  border-left:1px solid var(--pn-hairline);border-right:1px solid var(--pn-hairline);
  position:relative;z-index:1;
}
#portfolio-nav-root .pf-nav-brand{
  display:inline-flex;align-items:center;gap:9px;flex:none;min-width:0;height:34px;
  font-size:12.5px;font-weight:650;letter-spacing:-.025em;
  border-radius:5px;white-space:nowrap;
}
#portfolio-nav-root .pf-nav-brand:hover .pf-nav-mark{border-color:var(--pn-muted)}
#portfolio-nav-root .pf-nav-name>span{color:var(--pn-muted)}
#portfolio-nav-root .pf-nav-mark{
  display:block;width:33px;height:33px;flex:none;overflow:hidden;
  border:1px solid var(--pn-border);border-radius:8px;
  background:var(--pn-inset);
}
#portfolio-nav-root .pf-nav-avatar{
  display:block;width:100%;height:100%;object-fit:cover;
  border:0;border-radius:inherit;
}
#portfolio-nav-root .pf-nav-desktop-links{
  display:flex;align-items:center;gap:3px;margin-left:clamp(11px,2vw,27px);height:100%;
  flex:1;min-width:0;
}
#portfolio-nav-root .pf-nav-link{
  display:inline-flex;align-items:center;justify-content:center;height:32px;
  padding:0 10px;white-space:nowrap;font-size:12px;font-weight:500;
  border-radius:6px;border:1px solid transparent;
  background:var(--pn-bg);color:var(--pn-muted);
}
#portfolio-nav-root .pf-nav-link:hover,
#portfolio-nav-root .pf-nav-link[aria-current],
#portfolio-nav-root .pf-nav-link.is-active{
  background:var(--pn-hover);color:var(--pn-ink);border-color:transparent;
}
#portfolio-nav-root .pf-nav-actions{
  display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-left:auto;
}
#portfolio-nav-root .pf-nav-search{
  display:flex;align-items:center;gap:9px;justify-content:flex-start;
  width:clamp(145px,16vw,226px);height:32px;padding:0 8px;
  border:1px solid transparent;border-radius:6px;
  background:var(--pn-bg);color:var(--pn-muted);text-align:left;
}
#portfolio-nav-root .pf-nav-search:hover{
  background:var(--pn-hover);color:var(--pn-ink);
}
#portfolio-nav-root .pf-nav-search>span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.7px;
}
#portfolio-nav-root kbd{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  padding:1px 5px;min-height:18px;border:1px solid var(--pn-border);
  border-radius:4px;background:var(--pn-inset);font-size:10px;
  font-family:inherit;line-height:1;color:var(--pn-muted);white-space:nowrap;
}
#portfolio-nav-root .pf-nav-icon{
  display:inline-grid;place-items:center;width:32px;height:32px;
  padding:0;border:1px solid transparent;border-radius:6px;
  color:var(--pn-muted);background:var(--pn-bg);
}
#portfolio-nav-root .pf-nav-icon:hover{
  background:var(--pn-hover);color:var(--pn-ink);
}
#portfolio-nav-root .pf-nav-icon svg{width:16px;height:16px}
#portfolio-nav-root .pf-nav-mobile-search,
#portfolio-nav-root .pf-nav-mobile-menu{display:none}
#portfolio-nav-root .pf-nav-progress-track{
  position:absolute;bottom:-1px;left:0;width:100%;height:2px;
  overflow:hidden;pointer-events:none;
}
#portfolio-nav-root #pf-nav-progress{
  display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;
  background:var(--pn-ink);will-change:transform;
}
/* contextual search: fixed dialog, deliberate journal-style row density. */
#portfolio-nav-root .pf-nav-dialog{
  box-sizing:border-box;position:fixed;inset:0 auto auto;
  width:min(530px,calc(100vw - 24px));max-width:none;max-height:min(75dvh,620px);
  padding:0;margin:min(16vh,132px) auto 0;
  border:1px solid var(--pn-border);border-radius:8px;
  background:var(--pn-bg);color:var(--pn-ink);
  box-shadow:0 18px 50px #0005;overflow:hidden;
}
#portfolio-nav-root .pf-nav-dialog::backdrop{background:rgba(9,9,11,.58)}
#portfolio-nav-root .pf-search-input-row{
  display:flex;align-items:center;gap:10px;height:49px;padding:0 13px;
  border-bottom:1px solid var(--pn-hairline);
}
#portfolio-nav-root .pf-search-input-row>svg{color:var(--pn-muted)}
#portfolio-nav-root #pf-nav-query{
  flex:1;min-width:0;height:100%;background:transparent;color:var(--pn-ink);
  border:0;outline:0;appearance:none;font:500 13px/1.3 Inter,Arial,sans-serif;
  box-shadow:none;
}
#portfolio-nav-root #pf-nav-query::-webkit-search-cancel-button{display:none}
#portfolio-nav-root #pf-nav-query::placeholder{color:var(--pn-muted)}
#portfolio-nav-root .pf-search-close{
  font-size:10px;padding:3px 7px;border-radius:4px;border:1px solid var(--pn-border);
  background:var(--pn-inset);color:var(--pn-muted);
}
#portfolio-nav-root .pf-search-results{
  display:grid;gap:3px;padding:8px;max-height:390px;overflow:auto;
  scrollbar-width:thin;
}
#portfolio-nav-root .pf-search-result{
  width:100%;min-height:38px;display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;
  border:1px solid transparent;background:transparent;border-radius:5px;
  color:var(--pn-ink);padding:7px 9px;text-align:left;
}
#portfolio-nav-root .pf-search-result>svg{width:14px;color:var(--pn-muted)}
#portfolio-nav-root .pf-search-result>span{
  font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#portfolio-nav-root .pf-search-result>small{font-size:10px;color:var(--pn-muted)}
#portfolio-nav-root .pf-search-result:hover,
#portfolio-nav-root .pf-search-result[aria-selected="true"]{
  background:var(--pn-hover);
}
#portfolio-nav-root .pf-search-empty{font-size:12px;color:var(--pn-muted);padding:15px}
#portfolio-nav-root .pf-search-foot{
  display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--pn-hairline);
  color:var(--pn-muted);background:var(--pn-inset);padding:8px 12px;font-size:10px;
}
#portfolio-nav-root .pf-mobile-backdrop,
#portfolio-nav-root .pf-mobile-drawer,
#portfolio-nav-root .pf-nav-dock{display:none}
/* Replace the old 64px/nav+mobile overlay with journal-like compact fixed chrome. */
body:has(#portfolio-nav-root) {scroll-padding-top:62px}
body:has(#portfolio-nav-root) #hero-section {scroll-margin-top:60px}
#portfolio-nav-root .pf-drawer-kicker{font-variant:all-small-caps;letter-spacing:.07em}
/* 1100px is the comfortable cutoff; never squash six links and a search field. */
@media(max-width:1120px){
  #portfolio-nav-root .pf-nav-inner{padding-inline:15px;gap:5px}
  #portfolio-nav-root .pf-nav-desktop-links{margin-left:6px;gap:1px}
  #portfolio-nav-root .pf-nav-link{padding-inline:7px;font-size:11px}
  #portfolio-nav-root .pf-nav-search{width:155px;gap:5px}
}
@media(max-width:990px){
  #portfolio-nav-root .pf-nav-desktop-links,
  #portfolio-nav-root .pf-nav-search,
  #portfolio-nav-root .pf-nav-github{display:none}
  #portfolio-nav-root .pf-nav-inner{padding-inline:14px}
  #portfolio-nav-root .pf-nav-actions{gap:3px}
  #portfolio-nav-root .pf-nav-mobile-search,
  #portfolio-nav-root .pf-nav-mobile-menu{display:inline-grid}
  #portfolio-nav-root .pf-nav-inner>.pf-nav-brand{margin-right:auto}
  #portfolio-nav-root .pf-mobile-backdrop{
    display:block;position:fixed;inset:48px 0 0;z-index:69;
    background:rgba(9,9,11,.64);
  }
  #portfolio-nav-root .pf-mobile-drawer{
    display:flex;flex-direction:column;
    position:fixed;right:0;left:auto;top:48px;bottom:0;z-index:70;
    width:min(400px,100%);min-height:0;
    background:var(--pn-bg);border-left:1px solid var(--pn-border);
    color:var(--pn-ink);box-shadow:-18px 0 42px #0004;
  }
  #portfolio-nav-root .pf-drawer-handle{display:none}
  #portfolio-nav-root .pf-drawer-head{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;border-bottom:1px solid var(--pn-hairline);padding:16px 16px;
  }
  #portfolio-nav-root .pf-drawer-head h2{
    font-size:17px;font-weight:620;line-height:1.25;margin:4px 0 0;letter-spacing:-.03em;
  }
  #portfolio-nav-root .pf-drawer-kicker{font-size:10px;color:var(--pn-muted);font-variant:normal}
  #portfolio-nav-root .pf-drawer-body{
    flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:13px 15px 28px;
  }
  #portfolio-nav-root .pf-drawer-search{
    display:flex;gap:9px;align-items:center;width:100%;height:37px;
    background:var(--pn-inset);border:1px solid var(--pn-border);
    border-radius:6px;color:var(--pn-muted);text-align:left;padding:0 11px;
  }
  #portfolio-nav-root .pf-drawer-search span{flex:1}
  #portfolio-nav-root .pf-drawer-label{
    padding:19px 4px 7px;color:var(--pn-muted);font-size:10px;letter-spacing:.035em;font-weight:600;
  }
  #portfolio-nav-root .pf-drawer-rows{display:grid;gap:2px}
  #portfolio-nav-root .pf-drawer-rows a{
    display:grid;grid-template-columns:18px minmax(0,1fr) 15px;align-items:center;gap:12px;
    min-height:40px;border:1px solid transparent;border-radius:5px;
    background:transparent;color:var(--pn-muted);
    padding:0 10px;font-size:12.5px;font-weight:480;
  }
  #portfolio-nav-root .pf-drawer-rows a[aria-current="page"],
  #portfolio-nav-root .pf-drawer-rows a:hover{
    color:var(--pn-ink);background:var(--pn-hover);
  }
  #portfolio-nav-root .pf-drawer-rows svg{width:15px;height:15px}
  #portfolio-nav-root .pf-drawer-rows a svg:last-child{width:13px;color:var(--pn-muted)}
  #portfolio-nav-root .pf-drawer-foot{
    display:grid;gap:2px;padding:10px 15px max(12px,env(safe-area-inset-bottom));
    border-top:1px solid var(--pn-hairline);background:var(--pn-inset);
  }
  #portfolio-nav-root .pf-drawer-foot>a,#portfolio-nav-root .pf-drawer-foot>button{
    min-height:38px;display:grid;grid-template-columns:20px minmax(0,1fr) 15px;gap:10px;
    align-items:center;text-align:left;border:1px solid transparent;border-radius:5px;
    background:transparent;color:var(--pn-muted);padding:0 9px;
  }
  #portfolio-nav-root .pf-drawer-foot>button{grid-template-columns:20px minmax(0,1fr)}
  #portfolio-nav-root .pf-drawer-foot>a:hover,#portfolio-nav-root .pf-drawer-foot>button:hover{
    background:var(--pn-hover);color:var(--pn-ink);
  }
  body.pf-nav-lock{overflow:hidden!important}
}
@media(max-width:767px){
  #portfolio-nav-root .pf-nav-dock{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
    position:fixed;bottom:0;left:0;right:0;z-index:49;
    height:calc(54px + env(safe-area-inset-bottom));padding:3px 5px env(safe-area-inset-bottom);
    background:var(--pn-bg);border-top:1px solid var(--pn-border);
  }
  #portfolio-nav-root .pf-nav-dock>a,
  #portfolio-nav-root .pf-nav-dock>button{
    position:relative;min-width:0;height:47px;border:0;border-radius:5px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:transparent;color:var(--pn-muted);font-size:clamp(9px,2.5vw,10.2px);font-weight:500;
  }
  #portfolio-nav-root .pf-nav-dock svg{width:17px;height:17px}
  #portfolio-nav-root .pf-nav-dock > :is(a,button) > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
  #portfolio-nav-root .pf-drawer-foot>button[data-pf-contact]{grid-template-columns:20px minmax(0,1fr) 15px}
  #portfolio-nav-root .pf-nav-dock>:hover{background:var(--pn-hover)}
  #portfolio-nav-root .pf-nav-dock>[aria-current="page"]{color:var(--pn-ink)}
  #portfolio-nav-root .pf-nav-dock>[aria-current="page"]::before{
    content:"";position:absolute;top:0;left:calc(50% - 14px);width:28px;height:2px;background:var(--pn-ink);
  }
  #portfolio-nav-root .pf-mobile-drawer{bottom:calc(54px + env(safe-area-inset-bottom));width:100%;border-left:0}
  #portfolio-nav-root .pf-mobile-backdrop{bottom:calc(54px + env(safe-area-inset-bottom))}
  body:has(#portfolio-nav-root){padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  #portfolio-nav-root .pf-nav-dialog{margin-top:10dvh;max-height:75dvh}
}
@media(max-width:359px){
  #portfolio-nav-root .pf-nav-dock{padding-inline:3px}
  #portfolio-nav-root .pf-nav-dock> :is(a,button){font-size:9px;letter-spacing:-.025em}
  #portfolio-nav-root .pf-nav-name{font-size:11.5px}
  #portfolio-nav-root .pf-nav-inner{padding-inline:9px}
  #portfolio-nav-root .pf-nav-actions{gap:0}
  #portfolio-nav-root .pf-nav-icon{width:29px;height:29px}
}
@media(prefers-reduced-motion:reduce){
  #portfolio-nav-root *,#portfolio-nav-root *::before,#portfolio-nav-root *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
@media print{
  #portfolio-nav-root{display:none!important}
  body:has(#portfolio-nav-root){padding-bottom:0!important}
}

/* Top-level document offset is only needed on pages with a normal-flow main.
   The homepage hero already reserves space for its fixed application bar. */
body.resume-page:has(#portfolio-nav-root),
body:has(#archive-main):has(#portfolio-nav-root){padding-top:48px}
#portfolio-nav-root .pf-nav-header{font-variant-numeric:tabular-nums}
@media print{
  body.resume-page:has(#portfolio-nav-root),
  body:has(#archive-main):has(#portfolio-nav-root){padding-top:0!important}
}

/* Progressive-enhancement fallback: meaningful links before the JS module
   loads, styled as the same 48px bar rather than bare text at the document top. */
#portfolio-nav-root > nav[aria-label="primary navigation"]{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:48px;display:flex;align-items:center;gap:18px;
  padding:0 max(16px,calc((100vw - 1344px)/2 + 22px));
  background:var(--pn-bg);color:var(--pn-ink);
  border-bottom:1px solid var(--pn-border);
  font:500 12px/1.4 Inter,"Segoe UI",Arial,sans-serif;
}
#portfolio-nav-root > nav[aria-label="primary navigation"] a:hover{color:var(--pn-muted)}

/* Desktop journal DitherScene field bounds only — preserve header geometry.
   Journal: 1500px max header, 1px top+bottom chrome stroke above 1024px.
   The portfolio's brand and controls deliberately stay at their existing XY. */
@media (min-width:1024px) {
  #portfolio-nav-root .pf-nav-dither {
    left:50%;right:auto;top:1px;bottom:auto;
    width:min(100%,1500px);height:46px;
    transform:translateX(-50%);
  }
}