:root {
  --bg: #070406;
  --red: #c10007;
  --red-bright: #ff3b3f;
  --ink: #f7f0f0;
  --ink-dim: #ddcdcd;
  --muted: #a3898b;
  --line: rgba(255, 255, 255, 0.09);
  --line-red: rgba(193, 0, 7, 0.3);
  --card: rgba(255, 255, 255, 0.026);
  --radius: 18px;
  --nav-h: 72px;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --sans: "Inter", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* Language marks are used as masks, not images, so their color is ours to set.
   The -plain variants are single-shape, which is what a mask needs. */
[data-lang] {
  --icon: none;
  --c: var(--muted);
}

[data-lang="lua"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/lua/lua-plain.svg");
  --c: #7076ee;
}

[data-lang="cpp"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-plain.svg");
  --c: #6aa9e0;
}

[data-lang="csharp"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/csharp/csharp-plain.svg");
  --c: #ab7be0;
}

[data-lang="java"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-plain.svg");
  --c: #e0a04a;
}

[data-lang="swift"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/swift/swift-plain.svg");
  --c: #f05138;
}

[data-lang="objc"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/objectivec/objectivec-plain.svg");
  --c: #5b9dff;
}

[data-lang="ts"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-plain.svg");
  --c: #4b8fdb;
}

[data-lang="js"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-plain.svg");
  --c: #f1e05a;
}

[data-lang="html"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-plain.svg");
  --c: #e8613c;
}

[data-lang="css"] {
  --icon: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-plain.svg");
  --c: #9b7fd4;
}

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

/* Deliberately no overflow here: a non-visible overflow on the root stops the
   body's overflow from propagating to the viewport, which makes the body a
   dead scroll container and breaks every position: sticky on the page. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 0, 7, 0.8) rgba(255, 255, 255, 0.05);
}

/* Scroll lock for the mobile menu. Hiding the root's overflow is the obvious
   way to do this, but it clamps the viewport scroll to zero and leaves the
   sticky header with no scrollport to stick to, so the header drops out of
   view. Holding the body at a negative offset freezes the page where it was. */
html.is-locked body {
  position: fixed;
  top: var(--lock-y, 0px);
  inset-inline: 0;
  width: 100%;
  /* Pinning the header pulls it out of the flow, so hold its space open or
     everything below jumps up by the height of the bar. */
  padding-top: var(--lock-pad, 0px);
}

/* The body no longer scrolls, so sticky has nothing to resolve against. */
html.is-locked .site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: #0a0608;
}

::-webkit-scrollbar-thumb {
  border: 3px solid #0a0608;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--red-bright), var(--red));
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6c70, var(--red-bright));
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: #0a0608;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Two offset gradient fields. They animate their own background-position, which
   leaves transform free for the scroll parallax script.js writes. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -35%;
  z-index: -3;
  pointer-events: none;
  background-repeat: no-repeat;
  will-change: transform;
}

body::before {
  background-image:
    radial-gradient(ellipse closest-side, rgba(193, 0, 7, 0.3), rgba(193, 0, 7, 0.07) 58%, transparent),
    radial-gradient(ellipse closest-side, rgba(193, 0, 7, 0.15), transparent);
  background-size: 1500px 1000px, 1250px 900px;
  background-position: 78% 4%, 4% 90%;
  transform: translate3d(0, var(--glow-a, 0px), 0);
  animation: glow-a 19s ease-in-out infinite alternate;
}

body::after {
  background-image:
    radial-gradient(ellipse closest-side, rgba(120, 0, 12, 0.34), transparent),
    radial-gradient(ellipse closest-side, rgba(255, 59, 63, 0.11), transparent);
  background-size: 1150px 900px, 900px 720px;
  background-position: 36% 64%, 90% 76%;
  opacity: 0.8;
  transform: translate3d(0, var(--glow-b, 0px), 0);
  animation: glow-b 25s ease-in-out infinite alternate;
}

@keyframes glow-a {
  to {
    background-position: 64% 20%, 18% 74%;
  }
}

@keyframes glow-b {
  to {
    background-position: 50% 46%, 74% 60%;
    opacity: 1;
  }
}

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}

#bg-canvas.is-live {
  opacity: 1;
}

.grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.grain {
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.6) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(193, 0, 7, 0.55);
  color: #fff;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

/* Every top-level band shares one centered measure. */
.nav,
.hero,
.section,
.footer {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(7, 4, 6, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav-h);
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 12px rgba(193, 0, 7, 0.5));
  transition: filter 0.25s var(--ease);
}

.nav-logo:hover img {
  filter: drop-shadow(0 0 16px rgba(255, 59, 63, 0.7));
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-links a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}

.nav-links a.is-active {
  color: var(--ink);
}

.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: var(--red-bright);
  box-shadow: 0 0 10px rgba(255, 59, 63, 0.5);
}

.nav-cta {
  padding: 10px 18px;
  border: 1px solid rgba(255, 59, 63, 0.6);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #e0141a, var(--red));
  box-shadow: 0 6px 24px rgba(193, 0, 7, 0.3);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(193, 0, 7, 0.45);
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 27;
  place-content: center;
  justify-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--line-red);
  background: rgba(193, 0, 7, 0.14);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), width 0.35s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: none;
  grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + 20px) var(--gutter) max(32px, env(safe-area-inset-bottom));
  background:
    radial-gradient(130% 80% at 85% 0%, rgba(193, 0, 7, 0.26), transparent 62%),
    rgba(6, 3, 5, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease),
    visibility 0.38s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mm-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(30px, 8.5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
    color 0.2s var(--ease);
}

.mm-link i {
  color: var(--red-bright);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.1em;
}

.mm-link:active {
  color: var(--red-bright);
}

.mobile-menu.is-open .mm-link {
  opacity: 1;
  transform: none;
}

.mobile-menu.is-open .mm-link:nth-child(1) {
  transition-delay: 0.08s;
}
.mobile-menu.is-open .mm-link:nth-child(2) {
  transition-delay: 0.14s;
}
.mobile-menu.is-open .mm-link:nth-child(3) {
  transition-delay: 0.2s;
}
.mobile-menu.is-open .mm-link:nth-child(4) {
  transition-delay: 0.26s;
}

.mobile-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease) 0.3s, transform 0.5s var(--ease) 0.3s;
}

.mobile-menu.is-open .mobile-foot {
  opacity: 1;
  transform: none;
}

.mobile-foot p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: calc(100svh - var(--nav-h));
  padding: 32px 0 96px;
}

.hero-copy {
  min-width: 0;
}

.hero-copy > * {
  animation: enter 0.9s var(--ease) both;
}

.hero-copy > *:nth-child(1) {
  animation-delay: 0.05s;
}
.hero-copy > *:nth-child(2) {
  animation-delay: 0.14s;
}
.hero-copy > *:nth-child(3) {
  animation-delay: 0.23s;
}
.hero-copy > *:nth-child(4) {
  animation-delay: 0.32s;
}
.hero-copy > *:nth-child(5) {
  animation-delay: 0.41s;
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 0 0 rgba(255, 59, 63, 0.6);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(255, 59, 63, 0);
  }
}

h1 {
  margin: 0;
  font-size: clamp(46px, 5.6vw, 72px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

h1 span {
  display: block;
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.24;
  white-space: nowrap;
}

.hero-lede {
  max-width: 44ch;
  margin: 26px 0 32px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #e0141a, var(--red));
  box-shadow: 0 10px 34px rgba(193, 0, 7, 0.32);
}

.btn-primary:hover {
  box-shadow: 0 16px 44px rgba(193, 0, 7, 0.46);
}

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--card);
}

.btn-ghost:hover {
  border-color: var(--line-red);
  background: rgba(193, 0, 7, 0.08);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.hero-stats dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-stats dd {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Sized off the cap height of the stat values it sits in line with. */
.stat-logo {
  display: block;
  width: auto;
  height: 19px;
  margin-top: 1px;
}

.hero-mark {
  position: relative;
  display: grid;
  place-items: center;
}

.viper-canvas,
.viper-logo {
  width: min(100%, 430px);
  height: auto;
  aspect-ratio: 1;
}

.viper-canvas {
  opacity: 0;
  transition: opacity 1s ease;
  will-change: transform;
}

.viper-canvas.is-live {
  opacity: 1;
}

.viper-logo {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo-glow {
  position: absolute;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 0, 7, 0.42), transparent 68%);
  filter: blur(22px);
  animation: glow 6s ease-in-out infinite;
}

@keyframes glow {
  50% {
    transform: scale(1.12);
    opacity: 0.72;
  }
}

@keyframes mark-sway {
  0%,
  100% {
    transform: rotate(-8deg) translateX(-1px);
  }
  50% {
    transform: rotate(8deg) translateX(2px);
  }
}

.scroll-hint {
  position: absolute;
  left: 0;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.scroll-hint:hover {
  color: var(--ink);
}

/* A fixed track with a short segment travelling down it. No stretching. */
.scroll-hint i {
  position: relative;
  display: block;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.13);
}

.scroll-hint i::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 15px;
  background: linear-gradient(180deg, transparent, var(--red-bright));
  animation: scroll-run 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-run {
  0% {
    transform: translateY(-15px);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(44px);
    opacity: 0;
  }
}

.section {
  position: relative;
  padding: clamp(72px, 10vw, 118px) 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-head {
  margin-bottom: 48px;
}

.kicker {
  margin: 0 0 12px;
  color: var(--red-bright);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}

.about-main,
.about-side,
.job-body,
.project {
  min-width: 0;
}

.about-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.023em;
  color: var(--ink);
  text-wrap: pretty;
}

/* script.js wraps each word so the sentence lights up left to right. */
.js .about-lead .word {
  display: inline-block;
  opacity: 0.16;
  filter: blur(5px);
  transform: translateY(7px);
  transition: opacity 0.55s var(--ease), filter 0.55s var(--ease),
    transform 0.55s var(--ease);
  transition-delay: calc(var(--w) * 22ms);
}

.js .about-lead.is-visible .word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.toolkit {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.toolkit-label {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.chip::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color 0.25s var(--ease);
}

li.chip:hover {
  transform: translateY(-2px);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 13%, transparent);
}

li.chip:hover::before {
  background-color: var(--c);
}

.chip.sm {
  padding: 5px 10px 5px 8px;
  color: var(--muted);
  font-size: 11px;
}

.chip.sm::before {
  width: 13px;
  height: 13px;
}

.about-side {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}

.status-card {
  position: relative;
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid var(--line-red);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(193, 0, 7, 0.13), rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.status-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 68%
  );
  transform: translateX(-100%);
  animation: sheen 7s ease-in-out infinite;
}

@keyframes sheen {
  55%,
  100% {
    transform: translateX(100%);
  }
}

.status-card > * {
  position: relative;
  z-index: 1;
}

.status-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.status-role {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.35;
}

.status-role strong {
  font-weight: 600;
  color: #fff;
}

.status-meta {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
}

.clock {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.about-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.about-facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  transition: padding 0.25s var(--ease), color 0.25s var(--ease);
}

.about-facts li:hover {
  padding-left: 10px;
  padding-right: 0;
}

.about-facts span {
  color: var(--muted);
}

.about-facts strong {
  font-weight: 500;
  text-align: right;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 30px;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(var(--red-bright), rgba(193, 0, 7, 0.08));
}

.job {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 32px;
  padding: 26px 0 42px;
}

.job::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 34px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(193, 0, 7, 0.16);
}

.job.current::before {
  background: #fff;
  box-shadow: 0 0 0 5px rgba(193, 0, 7, 0.32), 0 0 18px var(--red);
}

/* Stacked so the badge always sits under the dates. Left inline, it landed on
   the same row for short ranges and wrapped for long ones. */
.job-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.job-range {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(193, 0, 7, 0.16);
  color: #ffb4b6;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.job-body h3 {
  margin: 0 0 12px;
  font-size: 25px;
}

.job-body h3 span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.job-body p {
  margin: 0 0 20px;
  max-width: 60ch;
  color: var(--ink-dim);
  line-height: 1.72;
  text-wrap: pretty;
}

/* Inline links in the timeline copy. Base anchors here inherit and lose their
   underline, so they need marking out to read as links at all. */
.job-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 59, 63, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.22s var(--ease), text-decoration-color 0.22s var(--ease);
}

.job-link:hover,
.job-link:focus-visible {
  color: var(--red-bright);
  text-decoration-color: var(--red-bright);
}

.job-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
}

.job-facts li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.job-facts li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--red);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

/* Cursor-tracked highlight; --mx/--my are written by script.js. */
.project::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(193, 0, 7, 0.16),
    transparent 60%
  );
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.project:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 59, 63, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.project:hover::before {
  opacity: 1;
}

.project > * {
  position: relative;
}

.project-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.project h3 {
  margin: 0;
  font-size: 22px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.project-go {
  color: var(--muted);
  font-size: 16px;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.project:hover .project-go {
  color: var(--red-bright);
  transform: translate(3px, -3px);
}

.project p {
  flex: 1;
  margin: 14px 0 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.project-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.project:hover .chip.sm {
  color: var(--ink-dim);
  border-color: rgba(255, 255, 255, 0.16);
}

.project:hover .chip.sm::before {
  background-color: var(--c);
}

.repo {
  min-width: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
  transition: color 0.25s var(--ease);
}

.project:hover .repo {
  color: var(--ink-dim);
}

.contact-lede {
  max-width: 48ch;
  margin: -16px 0 36px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials a,
.socials .copy {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.socials a:hover,
.socials .copy:hover {
  transform: translateY(-3px);
  border-color: var(--line-red);
  background: rgba(193, 0, 7, 0.07);
}

.socials span {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.socials em {
  color: var(--muted);
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  transition: color 0.2s var(--ease);
}

.copy.is-copied {
  border-color: rgba(126, 231, 135, 0.5);
}

.copy.is-copied em {
  color: #7ee787;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand p {
  margin: 0;
}

.footer img {
  animation: mark-sway 6s ease-in-out infinite;
}

.footer-top {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.footer-top:hover {
  color: var(--ink);
}

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1040px) {
  .hero {
    grid-template-columns: 1fr 0.8fr;
  }

  .job {
    grid-template-columns: 150px 1fr;
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: grid;
    margin-left: auto;
  }

  .mobile-menu {
    display: grid;
  }

  .hero,
  .about-grid,
  .job,
  .project-grid,
  .socials {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
    padding: 8px 0 72px;
    gap: 20px;
  }

  .hero-mark {
    order: -1;
  }

  .viper-canvas {
    width: min(62vw, 280px);
  }

  .hero-stats {
    gap: 20px 30px;
    margin-top: 34px;
    padding-top: 24px;
  }

  .scroll-hint {
    display: none;
  }

  .job {
    gap: 12px;
    padding: 4px 0 34px;
  }

  .about-side {
    position: static;
  }

  .toolkit {
    margin-top: 30px;
    padding-top: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-h: 64px;
    --radius: 16px;
  }

  .section {
    padding: clamp(56px, 13vw, 82px) 0;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .hero-lede {
    font-size: 16px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 16px;
  }

  /* Two even columns read better than a ragged wrap at this width. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .hero-stats div:last-child {
    grid-column: 1 / -1;
  }

  .about-lead {
    font-size: 18.5px;
  }

  .status-card,
  .project {
    padding: 20px;
  }

  .socials a,
  .socials .copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 20px;
  }

  .about-facts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .about-facts strong {
    text-align: left;
  }

  .job-body h3 {
    font-size: 22px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero-stats div:last-child {
    grid-column: auto;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .chip {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .about-lead .word {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .mobile-menu.is-open .mm-link,
  .mobile-menu.is-open .mobile-foot {
    opacity: 1;
    transform: none;
  }

  .viper-canvas {
    display: none;
  }

  .viper-logo {
    position: static;
    opacity: 1;
    width: min(100%, 430px);
    height: auto;
    overflow: visible;
  }
}