/* ==========================================================================
   Shared site header: /nav.css  (pairs with /nav.js)

   Default look is the cream theme from the main page. A page that has a
   different palette overrides the --sh-* tokens in its own <style> block
   (placed AFTER the <link> to this file). Everything is prefixed sh- so it
   cannot collide with page styles.

   Tokens
     --sh-bg        header background
     --sh-menu-bg   dropdown and phone menu background
     --sh-panel     dropdown heading and hover background
     --sh-ink       wordmark, icons, dropdown item names
     --sh-soft      nav link color
     --sh-line      borders
     --sh-accent    hover, dot, active item
     --sh-accent-soft  tag background
     --sh-icon-bg   dropdown icon tile background
     --sh-wip-bg / --sh-wip-ink   "in progress" tag
     --sh-shadow    dropdown shadow
     --sh-max       width of the header contents (match the page's content width)
     --sh-pad       left and right padding (match the page's content padding)
   ========================================================================== */

.site-header{
  --sh-bg:#FAFAF7;
  --sh-menu-bg:#FAFAF7;
  --sh-panel:#F2EFE6;
  --sh-ink:#1C1F1D;
  --sh-soft:#5B6158;
  --sh-line:#DCD6C5;
  --sh-accent:#2C6E5F;
  --sh-accent-soft:#E4ECE8;
  --sh-icon-bg:#FFFFFF;
  --sh-wip-bg:#FEF3C7;
  --sh-wip-ink:#92400E;
  --sh-shadow:rgba(0,0,0,.07);
  --sh-max:920px;
  --sh-pad:28px;
  --sh-pad-y:16px;

  position:sticky;
  top:0;
  z-index:1000;
  isolation:isolate;
  background:var(--sh-bg);
  background:color-mix(in srgb, var(--sh-bg) 92%, transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sh-line);

  /* reset anything the page body might pass down */
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  text-transform:none;
  text-align:left;
  color:var(--sh-ink);
  -webkit-font-smoothing:antialiased;
}
.site-header *,
.site-header *::before,
.site-header *::after{ box-sizing:border-box; }
.site-header a{ color:inherit; text-decoration:none; }

/* thinner bar for pages that already carry their own heavy header */
.site-header[data-compact]{ --sh-pad-y:9px; }
.site-header[data-compact] .sh-icon{ width:28px; height:28px; }
.site-header[data-compact] .sh-icon svg{ width:14px; height:14px; }

.sh-inner{
  max-width:var(--sh-max);
  margin:0 auto;
  padding:var(--sh-pad-y) var(--sh-pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.site-header .sh-name{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:14px;
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--sh-ink);
}

/* ---------- links ---------- */
.site-header .sh-links{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:14px;
}
.site-header .sh-links li{ margin:0; padding:0; list-style:none; }
.site-header .sh-links > li > a{
  color:var(--sh-soft);
  font-size:14px;
  transition:color .15s ease;
}
.site-header .sh-links > li > a:hover,
.site-header .sh-links > li > a:focus-visible{ color:var(--sh-accent); text-decoration:none; }

/* ---------- icons ---------- */
.site-header .sh-icons{ display:flex; gap:14px; }
.site-header .sh-icon{
  width:34px; height:34px;
  border:1px solid var(--sh-line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--sh-ink);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.site-header .sh-icon:hover,
.site-header .sh-icon:focus-visible{
  border-color:var(--sh-accent);
  color:var(--sh-accent);
  transform:translateY(-1px);
  text-decoration:none;
}
.site-header .sh-icon svg{ width:16px; height:16px; }

/* ---------- hamburger ---------- */
.site-header .sh-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px; height:36px;
  margin:0;
  padding:8px;
  background:none;
  border:1px solid var(--sh-line);
  border-radius:50%;
  cursor:pointer;
  transition:border-color .15s ease;
}
.site-header .sh-toggle:hover{ border-color:var(--sh-accent); }
.site-header .sh-toggle span{
  display:block;
  height:1.5px;
  background:var(--sh-ink);
  border-radius:2px;
  transition:transform .22s ease, opacity .22s ease, width .22s ease;
  transform-origin:center;
}
.site-header .sh-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.site-header .sh-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; width:0; }
.site-header .sh-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- projects dropdown ---------- */
.site-header .sh-has-dd{ position:relative; }

.site-header .sh-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:5px 11px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--sh-ink);
  background:none;
  border:1px solid var(--sh-line);
  border-radius:20px;
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  transition:border-color .15s ease, color .15s ease;
}
.site-header .sh-trigger:hover,
.site-header .sh-trigger[aria-expanded="true"],
.site-header .sh-trigger[data-current]{
  border-color:var(--sh-accent);
  color:var(--sh-accent);
}
.site-header .sh-dot{
  width:6px; height:6px;
  background:var(--sh-accent);
  border-radius:50%;
  flex-shrink:0;
}
.site-header .sh-trigger svg{ width:10px; height:10px; transition:transform .2s ease; }
.site-header .sh-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }

.site-header .sh-dd-panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  min-width:290px;
  background:var(--sh-menu-bg);
  border:1px solid var(--sh-line);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 4px 16px var(--sh-shadow);
  z-index:1001;
}
.site-header .sh-dd-panel.open{ display:block; }

.site-header .sh-dd-head{
  padding:8px 14px 7px;
  background:var(--sh-panel);
  border-bottom:1px solid var(--sh-line);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--sh-soft);
}
.site-header .sh-dd-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 14px;
  color:var(--sh-ink);
  border-bottom:1px solid var(--sh-line);
  transition:background .12s ease;
}
.site-header .sh-dd-item:last-child{ border-bottom:none; }
.site-header .sh-dd-item:hover,
.site-header .sh-dd-item:focus-visible{ background:var(--sh-panel); color:var(--sh-ink); text-decoration:none; }
.site-header .sh-dd-item[aria-current="page"]{
  background:var(--sh-panel);
  box-shadow:inset 2px 0 0 var(--sh-accent);
}
.site-header .sh-dd-icon{
  width:28px; height:28px;
  margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:var(--sh-icon-bg);
  border:1px solid var(--sh-line);
  border-radius:4px;
}
.site-header .sh-dd-icon svg{ width:14px; height:14px; color:var(--sh-accent); }
.site-header .sh-dd-name{
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  margin-bottom:2px;
}
.site-header .sh-dd-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.site-header .sh-tag,
.site-header .sh-tag-wip{
  display:inline-block;
  padding:1px 6px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;
  line-height:1.6;
  letter-spacing:.03em;
  border-radius:3px;
}
.site-header .sh-tag{ background:var(--sh-accent-soft); color:var(--sh-accent); }
.site-header .sh-tag-wip{ background:var(--sh-wip-bg); color:var(--sh-wip-ink); }

.site-header :focus-visible{ outline:2px solid var(--sh-accent); outline-offset:2px; }

/* ---------- phone layout ---------- */
@media (max-width:720px){
  .site-header .sh-toggle{ display:flex; }

  .site-header .sh-links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:8px 0 16px;
    background:var(--sh-menu-bg);
    background:color-mix(in srgb, var(--sh-menu-bg) 97%, transparent);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--sh-line);
    max-height:calc(100vh - 68px);
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* hidden until the hamburger opens it */
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s .2s;
  }
  .site-header .sh-links.mobile-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .2s ease, transform .2s ease, visibility 0s 0s;
  }
  .site-header .sh-links li{ width:100%; border-bottom:1px solid var(--sh-line); }
  .site-header .sh-links li:last-child{ border-bottom:none; }
  .site-header .sh-links > li > a{
    display:block;
    width:100%;
    padding:14px var(--sh-pad);
    font-size:15px;
  }

  .site-header .sh-has-dd{ position:static; }
  .site-header .sh-trigger{
    width:100%;
    min-height:48px;
    gap:10px;
    padding:14px var(--sh-pad);
    font-size:15px;
    border:none;
    border-radius:0;
  }
  .site-header .sh-trigger svg{ margin-left:auto; width:12px; height:12px; }
  .site-header .sh-dd-panel{
    position:static;
    transform:none;
    left:auto; top:auto;
    width:100%;
    min-width:0;
    border:none;
    border-top:1px solid var(--sh-line);
    border-radius:0;
    box-shadow:none;
    background:var(--sh-panel);
  }
  .site-header .sh-dd-head{ padding:10px var(--sh-pad) 8px; }
  .site-header .sh-dd-item{
    align-items:center;
    min-height:56px;
    padding:12px var(--sh-pad);
    gap:12px;
  }
  .site-header .sh-dd-item:active{ background:var(--sh-accent-soft); }
}

@media (prefers-reduced-motion:reduce){
  .site-header *{ transition:none !important; }
}