/*
  site-base.css
  Purpose: Shared look of every page: the dark palette, type, the flat top bar, focus rings and the
  "pause motion" state. site.css (home) and detail-dark.css (project and experience pages) build on it.
*/
/* Self-hosted latin subsets (SIL Open Font License); the absolute paths let the build hash them. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-tight-latin.83d548cd73ef.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-latin.c36f509c0a8f.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-latin.a76f53ca6612.woff2) format('woff2')}
:root{
  --bg:#020306;--ink:#f3f5fb;--dim:rgba(226,232,248,.7);--faint:rgba(226,232,248,.58);--cy:#898888;--edge:rgba(255,255,255,.14);
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);overflow-x:hidden}
.still,.still *{scroll-behavior:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--bg)}
.mono{font-family:var(--mono)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}
section,header,main{scroll-margin-top:56px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skiplink{position:fixed;left:12px;top:-64px;z-index:200;background:var(--ink);color:#050608;padding:10px 16px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none;transition:top .2s}
.skiplink:focus{top:12px}

/* flat mono bar: transparent over the hero, solid once the page scrolls; a dot marks the section in view */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;height:56px;display:flex;align-items:center;gap:4px;padding:0 24px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid transparent;transition:opacity .8s .5s,background .25s,border-color .25s}
.bar.solid,.bar.plain{background:var(--bg);border-bottom-color:var(--edge)}
.bar .brand{margin-right:auto;font:600 16px/1 var(--sans);letter-spacing:-.01em;text-transform:none;text-decoration:none;color:var(--ink);padding:8px 0}
.bar nav{display:flex;align-items:center;gap:4px}
.bar a{position:relative;color:var(--dim);text-decoration:none;padding:8px 12px;transition:color .2s}
.bar a:hover,.bar a[aria-current]{color:var(--ink)}
.bar a.brand{padding:8px 0;color:var(--ink)}
.bar nav a[aria-current]:not(.cta)::before{content:'';position:absolute;left:1px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--cy)}
.bar a.cta{margin-left:8px;padding:8px 14px;border:1px solid var(--edge);border-radius:4px;color:var(--ink)}
.bar a.cta:hover,.bar a.cta[aria-current]{border-color:var(--ink)}
.bar .mt{display:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);background:none;border:1px solid transparent;border-radius:4px;padding:8px 10px;margin-left:6px;cursor:pointer}
.js .bar .mt{display:inline-block}
.bar .mt:hover{color:var(--ink)}
/* phones: the section links collapse into a Menu dropdown (a native details element, so it works without JavaScript) */
.bar .menu{display:none}
.bar .menu summary{list-style:none;color:var(--dim);border:1px solid transparent;border-radius:4px;padding:8px 10px;margin-left:6px;cursor:pointer}
.bar .menu summary::-webkit-details-marker{display:none}
.bar .menu summary:hover,.bar .menu[open] summary{color:var(--ink)}
.bar .sheet{position:fixed;top:56px;left:0;right:0;max-height:calc(100svh - 56px);overflow-y:auto;background:var(--bg);border-bottom:1px solid var(--edge);padding:6px 16px 14px}
.bar:has(.menu[open]){background:var(--bg);border-bottom-color:var(--edge)}
@media(max-width:640px){
  .bar{padding:0 16px}.bar nav a:not(.cta){display:none}.bar .mt .lbl{display:none}
  .bar .menu{display:block}
  .bar nav .sheet a{display:block;padding:15px 12px 15px 20px;font-size:13px;border-bottom:1px solid var(--edge)}
  .bar nav .sheet a:last-child{border-bottom:0}
  .bar nav .sheet a[aria-current]::before{left:6px}
}