:root {
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --logo-filter: none;
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0H5Z'/%3E%3C/svg%3E");
  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E");
  --icon-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3V6a2 2 0 0 1 2-2Zm0 3h6V6H9v1Zm13 5v2H2v-2h20Z'/%3E%3C/svg%3E");
  --icon-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 3.2V17h16V8.2l-8 5.2-8-5.2Zm1.4-1.2L12 11.3 18.6 7H5.4Z'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-4.5L7 20v-5a3 3 0 0 1-3-3V5Z'/%3E%3C/svg%3E");
  --icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.32 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.1 20.45H3.54V9H7.1v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0Z'/%3E%3C/svg%3E");
  --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.65 7.65 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 14.4A8.6 8.6 0 0 1 9.6 3a8.7 8.7 0 1 0 11.4 11.4Z'/%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0-6 1.4 3h-2.8L12 1Zm0 22-1.4-3h2.8L12 23ZM1 12l3-1.4v2.8L1 12Zm22 0-3 1.4v-2.8L23 12ZM4.2 4.2l3.1 1.1-2 2-1.1-3.1Zm15.6 15.6-3.1-1.1 2-2 1.1 3.1Zm0-15.6-1.1 3.1-2-2 3.1-1.1ZM4.2 19.8l1.1-3.1 2 2-3.1 1.1Z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.18 0.015 76);
  --bg-2: oklch(0.24 0.018 75);
  --fg: oklch(0.92 0.012 82);
  --mute: oklch(0.74 0.012 80);
  --faint: oklch(0.56 0.012 78);
  --rule: oklch(0.34 0.012 76);
  --accent: oklch(0.72 0.15 55);
  --accent-d: oklch(0.78 0.14 58);
  --logo-filter: invert(1) grayscale(1) brightness(1.35);
}

.topbar-inner {
  gap: clamp(10px, 2vw, 22px);
}

.topbar,
.topbar .brand,
.topbar nav a,
.header-icon {
  font-family: var(--sans);
  font-weight: 500;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  letter-spacing: 0;
}

.topbar .brand,
.topbar nav a,
.nav-link {
  gap: 8px;
  white-space: nowrap;
}

.topbar .nav-icon {
  color: var(--fg);
}

.topbar nav {
  align-items: center;
  margin-left: auto;
}

.nav-icon,
.header-icon::before,
.theme-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon-user { --icon: var(--icon-user); }
.icon-folder { --icon: var(--icon-folder); }
.icon-briefcase { --icon: var(--icon-briefcase); }
.icon-envelope { --icon: var(--icon-envelope); }
.icon-chat { --icon: var(--icon-chat); }
.icon-linkedin { --icon: var(--icon-linkedin); }
.icon-github { --icon: var(--icon-github); }
.icon-moon { --icon: var(--icon-moon); }
.icon-sun { --icon: var(--icon-sun); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.header-icon {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  color: var(--mute);
  display: inline-grid;
  place-items: center;
  padding: 0;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.header-icon:hover {
  border-color: var(--rule);
  color: var(--fg);
}

.header-icon::before {
  content: "";
}

.theme-toggle {
  background: transparent;
  cursor: pointer;
}

.theme-toggle::before {
  content: none;
}

.theme-toggle .theme-icon {
  grid-area: 1 / 1;
}

html[data-theme="dark"] .theme-toggle .icon-moon,
html:not([data-theme="dark"]) .theme-toggle .icon-sun {
  display: none;
}

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

.hero .subhead-lines {
  display: grid;
  gap: 4px;
  max-width: 78ch;
}

.company-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: var(--logo-filter);
}

.experience-preview-list .company-logo {
  width: 24px;
  height: 24px;
}

.experience-company,
.role-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.experience-row {
  align-items: center;
}

.role-heading {
  margin-bottom: 9px;
}

.role-heading h2 {
  margin-bottom: 0;
}

.privacy-notice {
  flex-basis: 100%;
  max-width: 94ch;
  color: var(--faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: none;
}

.cta .privacy-notice {
  margin: 2px 0 24px;
}

@media (min-width: 720px) {
  .hero .subhead-lines span {
    white-space: nowrap;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .topbar .brand,
  .topbar nav a,
  .header-icon,
  .footer a,
  .footer-resume a,
  .footer-col a,
  .btn,
  .project-link,
  .preview-link,
  .play-link {
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    transition-property: transform, color, border-color, background, opacity;
  }

  .topbar .brand:hover,
  .topbar nav a:hover,
  .header-icon:hover,
  .footer a:hover,
  .footer-resume a:hover,
  .footer-col a:hover,
  .btn:hover,
  .project-link:hover,
  .preview-link:hover,
  .play-link:hover {
    transform: rotate(-1deg) translateY(-1px);
  }
}

@media (max-width: 720px) {
  .topbar-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .topbar nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topbar nav::-webkit-scrollbar {
    display: none;
  }

  .topbar nav a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 8px;
  }

  .header-actions {
    margin-left: auto;
  }

  .nav-icon,
  .header-icon::before,
  .theme-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand,
  .topbar nav a,
  .header-icon,
  .footer a,
  .footer-resume a,
  .footer-col a,
  .btn,
  .project-link,
  .preview-link,
  .play-link {
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  }
}