/* Shared typography and navigation for the portfolio, writing, and errors. */
@font-face {
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/archivo-black.woff2?v=20260903-8') format('woff2')
}

@font-face {
  font-family:"DM Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/dm-sans-var.woff2?v=20260903-8') format('woff2')
}

@font-face {
  font-family:"Instrument Serif";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/instrument-serif.woff2?v=20260903-8') 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.woff2?v=20260903-8') format('woff2')
}

@font-face {
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-600.woff2?v=20260903-8') format('woff2')
}

:root,[data-theme="light"],[data-theme="dark"] {
  --font-display: "Archivo Black", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-serif: "Instrument Serif", serif;
  --font-mono: "IBM Plex Mono", monospace;
  --display: var(--font-display);
  --body:var(--font-body);
  --mono:var(--font-mono);
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0
}

[hidden] {
  display:none!important
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #82a2ff;
  outline-offset:5px
}

.site-header {
  position:relative;
  display:flex;
  align-items:center;
  gap:28px;
  min-height:88px;
  padding:18px clamp(20px,5vw,80px);
  border-bottom:1px solid #69707b;
  background:#10141c;
  color:#f5f3ec;
  font-family:var(--font-body)
}

.site-identity {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  margin-right:auto;
  min-height:44px;
  flex-shrink:0
}

.site-identity strong {
  display:block;
  font-size:16px;
  line-height:1.3
}

.site-identity small {
  display:block;
  font:400 10px/1.4 var(--font-mono);
  color:#c2c8d0;
  margin-top:3px
}

.site-header nav {
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px
}

.site-header nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:inherit;
  font:600 12px/1.3 var(--font-mono);
  text-decoration:none
}

.site-header nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.site-header .theme-toggle {
  position:static;
  color:inherit;
  border:1px solid #69707b;
  min-height:44px;
  padding:10px;
  background:transparent
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:999;
  transform:translateY(-160%);
  padding:12px;
  background:#c5ff57;
  color:#101216;
  font-family:var(--font-body)
}

.skip-link:focus {
  transform:translateY(0)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

body:not([data-page="/"]) .sleeve {
  border:0;
  box-shadow:none;
  width:min(1200px,100%);
  margin:0 auto 60px
}

body:not([data-page="/"]) .site-header {
  padding-inline:clamp(20px,4vw,60px)
}

body:not([data-page="/"]) .side {
  padding:clamp(32px,5vw,72px) clamp(20px,4vw,60px)
}

body:not([data-page="/"]) .post-title-xl {
  font-size:clamp(2.5rem,7vw,5rem);
  line-height:1.02;
  letter-spacing:-.055em
}

body:not([data-page="/"]) .side-head h1,body:not([data-page="/"]) .side-head h2 {
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.1;
  letter-spacing:-.045em
}

body:not([data-page="/"]) .post-body {
  font-size:18px;
  line-height:1.75;
  max-width:70ch
}

@media(max-width:800px) {
  .site-header {
    flex-wrap:wrap;
    gap:8px 20px;
    padding:16px 20px
  }
  .site-header nav {
    order:3;
    width:100%;
    gap:0 18px
  }
  .site-identity small {
    font-size:9px
  }
  .site-header nav a {
    font-size:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.001ms!important;
    transition-duration:.001ms!important
  }
}