/* Shared header for the portfolio, local editor, and static blog. */
.site-header {
  --header-font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --header-bg:color-mix(in srgb,var(--bg) 95%,var(--text));
  --header-text:var(--text);
  --header-muted:var(--muted);
  --header-edge:color-mix(in srgb,var(--text) 10%,transparent);
  --header-hover:color-mix(in srgb,var(--text) 5%,transparent);
  --header-tab-fill:var(--header-hover);
  --header-focus:var(--accent);
  height:auto;
  display:block;
  border:0;
  padding-top:24px;
}
.site-header .header-capsule,
:root[data-theme="light"] .site-header .header-capsule {
  width:100%;
  min-height:68px;
  margin:0;
  padding:8px 24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:24px;
  border:1px solid var(--header-edge);
  border-radius:8px;
  background:var(--header-bg);
  color:var(--header-text);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.site-header .wordmark { min-height:44px; gap:0; justify-self:start; color:var(--header-text); }
.site-header .wordmark span:last-child { font:500 16px/1.2 var(--header-font); letter-spacing:-.35px; color:var(--header-text); }
.site-header .header-actions { display:flex; align-items:center; justify-self:end; gap:16px; }
.site-header .theme-toggle { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--header-muted); transition:background-color .16s ease,color .16s ease; }
.site-header .theme-toggle:hover,.site-header .theme-toggle:focus-visible { background:var(--header-hover); color:var(--header-text); border:0; }
.site-header .theme-icon { display:block; width:18px; height:18px; font-size:0; color:inherit; background:currentColor; -webkit-mask:url("assets/header-sun.svg") center/contain no-repeat; mask:url("assets/header-sun.svg") center/contain no-repeat; }
:root[data-theme="light"] .site-header .theme-icon { -webkit-mask-image:url("assets/header-moon.svg"); mask-image:url("assets/header-moon.svg"); }
.site-header .contact-nav { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; gap:0; border:0; border-radius:0; background:transparent; color:var(--header-muted); font:400 14px/1 var(--header-font); letter-spacing:0; transition:color .16s ease; }
.site-header .contact-nav[aria-current="page"],.site-header .contact-nav:hover,.site-header .contact-nav:focus-visible { background:transparent; color:var(--header-text); opacity:1; transform:none; }
.site-header .contact-nav .contact-text { display:inline; font:inherit; }
.site-header .theme-label { display:none; }
.site-header .wordmark:focus-visible,.site-header .theme-toggle:focus-visible,.site-header .contact-nav:focus-visible { outline:2px solid var(--header-focus); outline-offset:4px; }
.site-header nav { display:flex; align-items:center; justify-content:center; gap:16px; width:auto; min-width:0; margin:0; padding:0; border:0; font-family:var(--header-font); }
.site-header nav a { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 8px; color:var(--header-muted); font:400 14px/1 var(--header-font); letter-spacing:0; }
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a[aria-current="page"] { color:var(--header-text); }
.site-header nav a::after { content:""; display:block; position:absolute; inset:auto 8px 6px; height:1px; width:auto; background:currentColor; opacity:.65; transform:scaleX(0); transform-origin:left; transition:transform .16s ease; }
.site-header nav a[aria-current="page"]::after,.site-header nav a:hover::after { transform:scaleX(1); }
.site-header nav a:focus-visible { outline:2px solid var(--header-focus); outline-offset:2px; }
.site-header nav.animated-navigation a::after { display:none; }

.animated-tabs { --tabs-fill:var(--header-tab-fill); --tabs-ink:var(--header-text); position:relative; isolation:isolate; display:flex; width:max-content; max-width:100%; padding:4px; border-radius:999px; background:transparent; box-shadow:none; }
.animated-tabs-row,.animated-tabs-overlay-row { display:flex; align-items:center; justify-content:center; gap:4px; }
.site-header .animated-tabs-row { gap:16px; }
.animated-tabs-overlay { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; clip-path:inset(4px 100% 4px 0 round 999px); transition:clip-path .28s cubic-bezier(.22,.75,.25,1),opacity .16s ease; background:var(--tabs-fill); border-radius:999px; }
.animated-tabs-overlay-row { padding:4px; }
.animated-tabs .animated-tab,.site-header .animated-navigation .animated-tab { box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex:none; min-height:44px; min-width:44px; padding:0 8px; border:0; border-radius:0; background:transparent; color:var(--header-muted); font:400 14px/1 var(--header-font); letter-spacing:0; white-space:nowrap; text-decoration:none; cursor:pointer; }
.animated-tabs-overlay .animated-tab,.site-header .animated-navigation .animated-tabs-overlay .animated-tab { color:var(--tabs-ink); }
.animated-tabs .animated-tab:focus-visible { outline:2px solid var(--header-focus); outline-offset:2px; }
.site-header .animated-navigation .animated-tab:hover,.site-header .animated-navigation .animated-tab:focus-visible,.site-header .animated-navigation .animated-tab[aria-current="page"] { color:var(--header-text); }
.site-header .animated-navigation .animated-tab:focus-visible { outline-color:var(--header-focus); }
.site-header nav.animated-navigation { gap:0; border:0; padding:0; min-width:0; justify-self:center; }
.animated-tabs--underline { padding:0; border-radius:0; }
.animated-tabs--underline .animated-tabs-overlay { inset:auto auto 6px 0; width:var(--indicator-width,0px); height:1px; background:var(--header-text); border-radius:0; clip-path:none; transform:translateX(var(--indicator-left,0px)); transition:transform .2s ease,width .2s ease,opacity .16s ease; }
@media(max-width:900px) and (min-width:721px) {
  .site-header .header-capsule,:root[data-theme="light"] .site-header .header-capsule { padding-inline:16px; gap:16px; }
  .site-header nav { gap:8px; }
  .site-header .animated-tabs-row { gap:8px; }
  .site-header .header-actions { gap:8px; }
}
@media(max-width:720px) {
  .site-header { padding-top:16px; }
  .site-header .header-capsule,:root[data-theme="light"] .site-header .header-capsule { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; min-height:0; padding:8px 16px 4px; gap:0 12px; }
  .site-header .wordmark { grid-column:1; grid-row:1; }
  .site-header .wordmark span:last-child { font-size:14px; }
  .site-header .header-actions { grid-column:2; grid-row:1; gap:8px; }
  .site-header nav,.site-header nav.animated-navigation { grid-column:1/-1; grid-row:2; justify-self:stretch; justify-content:space-between; width:100%; padding:0; border:0; gap:8px; }
  .site-header .animated-tabs { width:100%; }
  .site-header .animated-tabs-row { width:100%; justify-content:space-between; gap:8px; }
  .site-header nav a,.site-header .animated-navigation .animated-tab { padding-inline:0; }
  .site-header nav a::after { left:0; right:0; }
}
@media(max-width:360px) {
  .site-header .header-capsule,:root[data-theme="light"] .site-header .header-capsule { padding-inline:12px; }
  .site-header .header-actions { gap:4px; }
  .site-header nav a,.site-header .contact-nav,.site-header .animated-navigation .animated-tab { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .animated-tabs-overlay,.animated-tabs--underline .animated-tabs-overlay,.site-header .theme-toggle,.site-header .contact-nav,.site-header nav a::after { transition:none; }
}