/* ════════════════════════════════════════════════════════════════
   TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  --bg:#11120f;
  --panel:#191b17;
  --high:#22251e;
  --text:#eeeee4;
  --muted:#a4a69b;
  --dim:#6d7064;
  --line:#2c2f27;
  --line-2:#3d4136;
  --accent:#ee8354;
  --accent-soft:#ee835422;
  --ink:#15170f;
  --green:#b3c69a;
  --glass:#11120fcc;
  --mono:'IBM Plex Mono',monospace;
  --display:'Manrope',sans-serif;
  --serif:'Instrument Serif',serif;
  --body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --radius:22px;
  --gutter:clamp(16px,4vw,52px);
  interpolate-size:allow-keywords;
}
[data-theme=light] {
  --bg:#eeefe7;
  --panel:#e5e7dd;
  --high:#d9ddcf;
  --text:#20251b;
  --muted:#59604f;
  --dim:#8a8f7f;
  --line:#d0d4c4;
  --line-2:#b9bfa9;
  --accent:#b8501f;
  --accent-soft:#b8501f1c;
  --ink:#fff7e9;
  --green:#536c37;
  --glass:#eeefe7cc;
}
/* ════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════ */
*,*::before,*::after {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 var(--body);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body:has(dialog[open]) {
  overflow:hidden;
}
::selection {
  background:var(--accent);
  color:var(--ink);
}
a {
  color:inherit;
  text-decoration:none;
}
button,input {
  font:inherit;
  color:inherit;
}
button {
  cursor:pointer;
  border:0;
  background:none;
  -webkit-tap-highlight-color:transparent;
}
button:disabled {
  cursor:default;
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
  border-radius:6px;
}
main > section.command-destination:focus {
  outline:none;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:500;
}
svg {
  display:block;
}
img {
  display:block;
}
.wrap {
  width:min(calc(100% - var(--gutter) * 2),1320px);
  margin-inline:auto;
}
.mono {
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.muted {
  color:var(--muted);
}
.accent {
  color:var(--accent);
}
.serif {
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.arrow {
  display:inline-block;
  transition:transform .4s var(--ease);
}
a:hover .arrow,button:hover .arrow {
  transform:translate(3px,-3px);
}
.skip {
  position:fixed;
  top:12px;
  left:16px;
  z-index:400;
  padding:10px 20px;
  background:var(--accent);
  color:var(--ink);
  border-radius:99px;
  transform:translateY(-200%);
  transition:transform .3s;
}
.skip:focus {
  transform:none;
}
/* grain */
.grain {
  position:fixed;
  inset:0;
  z-index:250;
  pointer-events:none;
  opacity:.05;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme=light] .grain {
  opacity:.08;
  mix-blend-mode:multiply;
}
.progress {
  position:fixed;
  inset:0 auto auto 0;
  width:100%;
  height:2px;
  background:var(--accent);
  z-index:300;
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none;
}
/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.header {
  position:fixed;
  inset:0 0 auto;
  z-index:200;
  transition:background .4s, border-color .4s, transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.scrolled {
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-color:var(--line);
}
.nav {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font:500 15px var(--display);
  letter-spacing:-.01em;
}
.brand-mark {
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--ink);
  font:600 13px var(--mono);
  transition:transform .6s var(--ease);
}
.brand:hover .brand-mark {
  transform:rotate(-20deg) scale(1.08);
}
.nav-links {
  display:flex;
  gap:6px;
  position:relative;
}
.nav-links a {
  position:relative;
  padding:8px 14px;
  font-size:14px;
  color:var(--muted);
  transition:color .3s;
}
.nav-links a::after {
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  bottom:3px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current] {
  color:var(--text);
}
.nav-links a:hover::after, .nav-links a[aria-current]::after {
  transform:scaleX(1);
  transform-origin:left;
}
.nav-tools {
  display:flex;
  align-items:center;
  gap:8px;
}
.icon-btn, .command-trigger {
  height:38px;
  min-width:38px;
  border-radius:99px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-2);
  color:var(--muted);
  transition:color .3s, border-color .3s, background .3s;
}
.icon-btn:hover, .command-trigger:hover {
  color:var(--text);
  border-color:var(--text);
}
.icon-btn svg {
  width:18px;
  height:18px;
}
.command-trigger {
  padding:0 13px;
  font:12px var(--mono);
}
.theme-icon .sun {
  display:none;
}
[data-theme=light] .theme-icon .sun {
  display:block;
}
[data-theme=light] .theme-icon .moon {
  display:none;
}
.nav-contact {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 18px;
  border-radius:99px;
  background:var(--text);
  color:var(--bg);
  font-weight:500;
  font-size:14px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.nav-contact::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
  z-index:-1;
}
.nav-contact:hover::before {
  transform:none;
}
.nav-contact:hover {
  color:var(--ink);
}
.menu-toggle {
  display:grid;
  list-style:none;
  cursor:pointer;
  padding:0;
}
/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.hero {
  position:relative;
  min-height:100svh;
  padding:120px 0 40px;
  display:flex;
  flex-direction:column;
}
.hero .wrap {
  flex:1;
  display:flex;
  flex-direction:column;
}
.hero-glow {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}
.hero-glow::before {
  content:'';
  position:absolute;
  width:60vw;
  height:60vw;
  max-width:900px;
  max-height:900px;
  right:-15vw;
  top:-20vw;
  border-radius:50%;
  background:radial-gradient(circle, var(--accent-soft), transparent 65%);
  animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    transform:scale(1.15) translate(-4%,4%);
  }
}
.hero-top {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  color:var(--muted);
  gap:16px;
}
.availability {
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.status-dot {
  position:relative;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
}
.status-dot::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--green);
  animation:ping 2.2s var(--ease) infinite;
}
@keyframes ping {
  to {
    transform:scale(3.4);
    opacity:0;
  }
}
.hero-grid {
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);
  align-items:center;
  padding:48px 0 40px;
}
.eyebrow {
  color:var(--muted);
  margin-bottom:26px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before {
  content:'';
  width:32px;
  height:1px;
  background:var(--accent);
}
h1 {
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:500;
  margin-bottom:34px;
  font-size:clamp(3.2rem,7vw,7rem);
}
h1 .line {
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
h1 .line > span {
  display:inline-block;
}
h1 .word-accent {
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--accent);
  letter-spacing:-.03em;
  padding-right:.06em;
}
.hero-description {
  color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.15rem);
  max-width:560px;
  line-height:1.7;
}
.hero-description strong {
  color:var(--text);
  font-weight:500;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:36px;
}
.button {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:54px;
  padding:0 28px;
  border-radius:99px;
  background:var(--accent);
  color:var(--ink);
  font-weight:600;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.button::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--text);
  border-radius:inherit;
  transform:scale(0);
  transition:transform .6s var(--ease);
  z-index:-1;
}
.button:hover::before {
  transform:scale(1.05);
}
.button:hover {
  color:var(--bg);
  box-shadow:0 18px 40px -18px var(--accent);
}
.text-link {
  position:relative;
  display:inline-flex;
  gap:8px;
  font-weight:500;
  padding:4px 0;
}
.text-link::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform-origin:right;
  transition:transform .5s var(--ease);
}
.text-link:hover::after {
  transform:scaleX(0);
}
.magnetic {
  will-change:transform;
  transition:transform .5s var(--ease);
}
/* ── interactive system ── */
.system {
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), transparent);
  padding:20px;
}
.system-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--dim);
  font-size:10px;
}
.system-art {
  position:relative;
  aspect-ratio:520/400;
  margin:6px 0 10px;
  transform:translate(var(--mx,0),var(--my,0));
  transition:transform .8s var(--ease);
}
.system-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.orbit {
  stroke:var(--line-2);
  stroke-width:1;
  fill:none;
}
.orbit.dash {
  stroke-dasharray:3 7;
}
.spin {
  transform-origin:260px 200px;
  animation:orbit 26s linear infinite;
}
.spin.rev {
  animation-duration:18s;
  animation-direction:reverse;
}
.orbit-pt {
  fill:var(--accent);
}
@keyframes orbit {
  to {
    transform:rotate(360deg);
  }
}
.route {
  stroke:var(--line-2);
  stroke-width:1.5;
  fill:none;
  stroke-dasharray:4 6;
}
.route.hot {
  stroke:var(--accent);
  stroke-dasharray:none;
  stroke-width:2;
  filter:drop-shadow(0 0 6px var(--accent));
}
.route-flow {
  stroke:var(--accent);
  stroke-width:1.5;
  fill:none;
  stroke-dasharray:2 14;
  opacity:.5;
  animation:flow 1.6s linear infinite;
}
@keyframes flow {
  to {
    stroke-dashoffset:-32;
  }
}
.core {
  position:absolute;
  left:50%;
  top:50%;
  width:17%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--bg);
  border:1px solid var(--line-2);
  font:600 clamp(14px,1.6vw,20px) var(--mono);
  color:var(--accent);
  box-shadow:0 0 0 10px var(--bg), 0 0 60px -10px var(--accent);
}
.core::after {
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid var(--accent);
  opacity:0;
}
.system.running .core::after {
  animation:ripple 1s var(--ease) infinite;
}
@keyframes ripple {
  from {
    opacity:.8;
    transform:scale(.9);
  }
  to {
    opacity:0;
    transform:scale(1.5);
  }
}
.node {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px 9px 10px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line-2);
  white-space:nowrap;
  transition:border-color .35s, box-shadow .35s, transform .5s var(--ease);
  z-index:2;
}
.node img {
  width:22px;
  height:22px;
  filter:grayscale(1) brightness(1.4);
  opacity:.75;
  transition:filter .4s, opacity .4s;
}
[data-theme=light] .node img {
  filter:grayscale(1);
}
.node small {
  display:block;
  font:9px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
}
.node strong {
  display:block;
  font:600 13px var(--display);
}
.node.lit {
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft), 0 12px 30px -12px var(--accent);
  transform:translate(-50%,-50%) scale(1.07);
}
.node.lit img, .system:hover .node img {
  filter:none;
  opacity:1;
}
.system-bottom {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.send-request {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:99px;
  border:1px solid var(--accent);
  color:var(--accent);
  font:500 13px var(--display);
  transition:background .3s, color .3s;
}
.send-request:hover:not([aria-disabled=true]) {
  background:var(--accent);
  color:var(--ink);
}
.send-request[aria-disabled=true] {
  opacity:.5;
}
.request-status {
  font:12px var(--mono);
  color:var(--muted);
}
.log {
  list-style:none;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  border:1px solid var(--line);
  overflow:hidden;
  font:11px/1.75 var(--mono);
  color:var(--dim);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:112px;
}
.log li {
  animation:logIn .45s var(--ease);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
}
.log li span {
  color:var(--muted);
}
@keyframes logIn {
  from {
    opacity:0;
    transform:translateY(8px);
  }
}
/* Teams and companies: an aligned index into the career history. */
.hero-bottom {
  border-top:1px solid var(--line);
  padding-top:24px;
}
.companies-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-bottom:18px;
}
.companies-heading > p {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
}
.companies-heading > p::before {
  content:'';
  width:22px;
  height:1px;
  background:var(--accent);
}
.companies-journey {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  transition:color .25s;
}
.companies-journey:hover { color:var(--text); }
.company-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  list-style:none;
  padding:0;
  margin:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.company-grid > li { min-width:0; }
.company-link {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  height:100%;
  min-height:110px;
  padding:24px 20px;
  background:var(--bg);
  box-shadow:0 0 0 1px var(--line);
  transition:background .35s;
}
.company-link:hover, .company-link:focus-visible { background:var(--panel); }
.company-link:focus-visible { outline-offset:-4px; border-radius:0; }
.company-name {
  color:var(--text);
  font:600 clamp(.95rem,1.15vw,1.1rem)/1.35 var(--display);
  letter-spacing:-.025em;
}
.company-context { font:10px/1.5 var(--mono); color:var(--muted); }
.company-arrow {
  position:absolute;
  right:12px;
  top:10px;
  color:var(--accent);
  font-size:14px;
  opacity:0;
  transform:translate(-3px,3px);
  transition:opacity .25s, transform .25s var(--ease);
}
.company-link:hover .company-arrow, .company-link:focus-visible .company-arrow {
  opacity:1;
  transform:none;
}

.section {
  padding:clamp(90px,12vw,170px) 0;
  position:relative;
}
.section-head {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:clamp(44px,6vw,80px);
}
.section-index {
  color:var(--accent);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:12px;
}
.section-index::before {
  content:'';
  width:32px;
  height:1px;
  background:currentColor;
}
.section-intro {
  color:var(--muted);
  font-size:1.05rem;
  max-width:440px;
  justify-self:end;
}
.js .reveal.pending {
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:var(--delay,0ms);
}
.reveal.visible {
  opacity:1;
  transform:none;
}
/* Shared technology labels */
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.tag {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border-radius:99px;
  border:1px solid var(--line-2);
  font:12px var(--mono);
  color:var(--muted);
  transition:color .35s, border-color .35s, background .35s, transform .35s var(--ease);
}
.tag:hover {
  color:var(--text);
  border-color:var(--text);
  transform:translateY(-2px);
}
.ti {
  width:14px;
  height:14px;
  object-fit:contain;
  flex:none;
  filter:grayscale(1) brightness(1.5);
  opacity:.65;
  transition:filter .5s, opacity .5s;
}
[data-theme=light] .ti {
  filter:grayscale(1) contrast(.8);
}
.ti.inv {
  filter:invert(1) grayscale(1);
}
[data-theme=light] .ti.inv {
  filter:grayscale(1);
}
.tag:hover .ti {
  filter:none;
  opacity:1;
}
[data-theme=dark] .tag:hover .ti.inv {
  filter:invert(1);
}
/* Selected work is a normal vertical list, with natural content height. */
.work {
  position: relative;
  padding-top:clamp(64px,7vw,104px);
}
.projects-list {
  display: grid;
  gap: 30px;
}
.work-card {
  --px:50%;
  --py:50%;
  min-width:0;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:var(--panel);
  position:relative;
  transition:border-color .5s;
}
.work-card:hover {
  border-color:var(--line-2);
}
.work-card::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(600px circle at var(--px) var(--py), var(--accent-soft), transparent 40%);
  opacity:0;
  transition:opacity .5s;
  z-index:1;
}
.work-card:hover::before {
  opacity:1;
}
.project-visual {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/32px 32px, var(--bg);
  border-right:1px solid var(--line);
  overflow:hidden;
  min-height:400px;
  padding:32px;
}
.project-visual::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 70%, transparent 20%, var(--bg) 75%);
  pointer-events:none;
}
.project-visual > * {
  position:relative;
  z-index:1;
}
.pv-label {
  color:var(--dim);
}
.pv-big {
  font:500 clamp(4rem,8vw,7.5rem)/.85 var(--display);
  letter-spacing:-.06em;
}
.pv-big small {
  font-size:.45em;
  color:var(--accent);
  letter-spacing:-.02em;
}
.pv-caption {
  color:var(--muted);
  font-size:14px;
  margin-top:12px;
}
/* freedom: module tree */
.tree {
  font:12px/1.9 var(--mono);
  color:var(--muted);
  margin:18px 0;
}
.tree div b {
  color:var(--accent);
  font-weight:500;
}
.tree div em {
  color:var(--green);
  font-style:normal;
}
/* amadeus: bars */
.bars {
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:130px;
  margin:18px 0;
}
.bars i {
  flex:1;
  height:100%;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  transform-origin:bottom;
  transform:scaleY(var(--h));
  opacity:.9;
}
/* alpha: integration */
.integration {
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:10px;
  margin:30px 0;
}
.int-end {
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:12px;
  font:11px/1.3 var(--mono);
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  background:var(--bg);
}
.int-hub {
  width:66px;
  height:66px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--ink);
  font:600 14px var(--mono);
  box-shadow:0 0 0 8px var(--accent-soft);
}
.int-line {
  position:relative;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 10px);
}
.int-line::after {
  content:'';
  position:absolute;
  top:-3px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:packet 2.2s var(--ease-io) infinite;
}
.int-line.back::after {
  animation-direction:reverse;
  animation-delay:1.1s;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
}
@keyframes packet {
  0% {
    left:0;
    opacity:0;
  }
  15%,85% {
    opacity:1;
  }
  100% {
    left:calc(100% - 7px);
    opacity:0;
  }
}
.project-copy {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:visible;
  padding:34px;
  overflow-wrap:anywhere;
}
.project-kicker {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--dim);
}
.project-copy h3 {
  line-height:1;
  letter-spacing:-.045em;
  font-size:clamp(1.6rem,2.5vw,2.6rem);
}
.project-copy > p {
  color:var(--muted);
}
.project-details {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
  font-size:14.5px;
  color:var(--muted);
}
.project-details li {
  position:relative;
  padding-left:20px;
}
.project-details li::before {
  content:'↳';
  position:absolute;
  left:0;
  color:var(--accent);
  font-family:var(--mono);
}
.project-link {
  margin-top:auto;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:500;
  color:var(--accent);
}
/* ════════════════════════════════════════════════════════════════
   EXPERIENCE
   ════════════════════════════════════════════════════════════════ */
.exp-grid {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px,7vw,120px);
  align-items:start;
}
.exp-aside {
  position:sticky;
  top:120px;
}
.exp-aside > p {
  color:var(--muted);
  margin-top:26px;
  max-width:420px;
}
.timeline {
  border-top:1px solid var(--line);
}
.job {
  --job-toggle-size:44px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.job::before {
  content:'';
  position:absolute;
  left:0;
  top:-1px;
  height:1px;
  width:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.job:has(.job-details[open])::before {
  transform:scaleX(1);
}
.job-heading {
  padding:28px 0 12px;
  user-select:text;
}
.job summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  align-self:center;
  justify-content:flex-end;
  width:var(--job-toggle-size);
  height:var(--job-toggle-size);
  margin-left:auto;
  margin-bottom:28px;
  padding:0;
}
.job summary::-webkit-details-marker {
  display:none;
}
.job summary:focus {
  outline:none;
}
.job summary:focus-visible .job-toggle {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.job-date {
  display:block;
  font:11px var(--mono);
  line-height:1.6;
  letter-spacing:.08em;
  color:var(--dim);
}
.job h3 {
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-.045em;
  line-height:1.05;
  margin:8px 0 4px;
  transition:color .4s;
}
.job:has(.job-details[open]) h3 {
  color:var(--accent);
}
.job-role {
  color:var(--muted);
  font-size:15px;
}
.job-toggle {
  flex:none;
  width:var(--job-toggle-size);
  height:var(--job-toggle-size);
  border-radius:50%;
  border:1px solid var(--line-2);
  display:grid;
  place-items:center;
  transition:transform .6s var(--ease), background .4s, border-color .4s, color .4s, box-shadow .4s;
  font-size:20px;
  color:var(--muted);
}
.job-details[open] .job-toggle {
  transform:rotate(135deg);
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
.job summary:hover .job-toggle,
.job summary:focus-visible .job-toggle {
  background:var(--text);
  border-color:var(--text);
  color:var(--ink);
  box-shadow:0 0 0 5px var(--accent-soft);
}
.job-details::details-content {
  block-size:0;
  overflow:hidden;
  transition:block-size .6s var(--ease), content-visibility .6s allow-discrete;
}
.job-details[open]::details-content {
  block-size:auto;
}
/* Keep selectable metadata beside the native control in a shared header row. */
@supports (grid-template-rows:subgrid) and selector(details::details-content) {
  .job {
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--job-toggle-size);
    grid-template-rows:auto auto;
    column-gap:20px;
  }
  .job-heading {
    grid-area:1 / 1;
    z-index:1;
    padding:28px 0;
  }
  .job-details {
    grid-area:1 / 1 / 3 / 3;
    display:grid;
    grid-template-columns:subgrid;
    grid-template-rows:subgrid;
    min-width:0;
  }
  .job summary {
    grid-column:2;
    grid-row:1;
    margin:0;
  }
  .job-details::details-content {
    grid-column:1 / -1;
    grid-row:2;
    min-width:0;
  }
}
.job-body {
  padding:0 64px 32px 0;
  color:var(--muted);
}
.job-body ul {
  margin:0 0 18px;
  padding:0;
  list-style:none;
  display:grid;
  gap:18px;
}
.job-body li {
  position:relative;
  padding-left:22px;
}
.job-body li::before {
  content:'↳';
  position:absolute;
  left:0;
  color:var(--accent);
  font-family:var(--mono);
}
.job-body strong {
  color:var(--text);
  font-weight:500;
}
.job-context {
  margin-bottom:16px;
  font-style:italic;
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--text);
}
/* ════════════════════════════════════════════════════════════════
   TOOLKIT
   ════════════════════════════════════════════════════════════════ */
.stack-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.filters {
  position:relative;
  display:inline-flex;
  padding:5px;
  border:1px solid var(--line-2);
  border-radius:99px;
}
.filter {
  position:relative;
  z-index:1;
  padding:9px 18px;
  border-radius:99px;
  font-size:14px;
  color:var(--muted);
  transition:color .4s;
}
.filter[aria-pressed=true] {
  color:var(--ink);
}
.filter-pill {
  position:absolute;
  top:5px;
  bottom:5px;
  left:0;
  border-radius:99px;
  background:var(--accent);
  transition:transform .55s var(--ease), width .55s var(--ease);
}
.stack-count {
  color:var(--muted);
}
.stack-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.stack-card {
  --px:50%;
  --py:50%;
  position:relative;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:hidden;
  transition:border-color .4s, transform .6s var(--ease);
}
.stack-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(400px circle at var(--px) var(--py), var(--accent-soft), transparent 45%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.stack-card:hover {
  border-color:var(--line-2);
  transform:translateY(-4px);
}
.stack-card:hover::before {
  opacity:1;
}
.stack-card:hover .ti {
  filter:none;
  opacity:1;
}
[data-theme=dark] .stack-card:hover .ti.inv {
  filter:invert(1);
}
.stack-card[hidden] {
  display:none;
}
.stack-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.stack-card h3 {
  font-size:1.5rem;
  letter-spacing:-.035em;
  line-height:1.1;
}
.stack-symbol {
  font:italic 400 2rem/1 var(--serif);
  color:var(--accent);
  transition:transform .6s var(--ease);
  flex-shrink:0;
}
.stack-card:hover .stack-symbol {
  transform:rotate(-12deg) scale(1.2);
}
.stack-card p {
  color:var(--muted);
  font-size:14.5px;
  margin-top:auto;
}
.learning {
  display:inline-block;
  vertical-align:middle;
  margin-left:6px;
  padding:3px 9px;
  border-radius:99px;
  background:var(--accent-soft);
  color:var(--accent);
  font:10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
::view-transition-group(*) {
  animation-duration:.55s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
/* ════════════════════════════════════════════════════════════════
   BEYOND
   ════════════════════════════════════════════════════════════════ */
.beyond-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  perspective:1200px;
}
.beyond-card {
  --px:50%;
  --py:50%;
  position:relative;
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-height:330px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden;
  transition:transform .7s var(--ease), border-color .4s;
  transform-style:preserve-3d;
}
.beyond-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(420px circle at var(--px) var(--py), var(--accent-soft), transparent 45%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.beyond-card:hover::before {
  opacity:1;
}
.beyond-card:hover {
  border-color:var(--line-2);
}
.beyond-icon {
  font:italic 400 clamp(4rem,6vw,5.5rem)/.9 var(--serif);
  color:var(--accent);
  margin-bottom:auto;
  transition:transform .7s var(--ease);
  transform:translateZ(0);
}
.beyond-card:hover .beyond-icon {
  transform:translateZ(40px) scale(1.05);
}
.beyond-card h3 {
  font-size:1.6rem;
  letter-spacing:-.04em;
}
.beyond-card p {
  color:var(--muted);
  font-size:15px;
}
.lang-row {
  display:grid;
  grid-template-columns:80px 1fr auto;
  align-items:center;
  gap:14px;
  font-size:15px;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.lang-row span:last-child {
  font:11px var(--mono);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.personal-note {
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:15px;
  flex-wrap:wrap;
}
.personal-note .ferris {
  display:inline-block;
  font-size:1.4rem;
  animation:scuttle 3s ease-in-out infinite;
}
@keyframes scuttle {
  0%,100% {
    transform:none;
  }
  25% {
    transform:translateX(-4px) rotate(-10deg);
  }
  75% {
    transform:translateX(4px) rotate(10deg);
  }
}
/* ════════════════════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════════════════════ */
.contact {
  padding:clamp(90px,12vw,170px) 0 60px;
  border-top:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.contact-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.contact-top .section-index {
  margin:0;
}
.contact-top .availability {
  color:var(--muted);
}
.hello {
  font-size:clamp(3rem,10.5vw,10.5rem);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:300;
  margin:48px 0 60px;
}
.hello .ln {
  display:block;
  white-space:nowrap;
}
.hello em {
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--accent);
  letter-spacing:-.03em;
  position:relative;
  display:inline-block;
}
.hello em::after {
  content:'';
  position:absolute;
  left:2%;
  right:4%;
  bottom:.05em;
  height:.05em;
  background:currentColor;
  border-radius:99px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.4s var(--ease) .6s;
}
.hello.visible em::after, html:not(.js) .hello em::after {
  transform:scaleX(1);
}
.contact-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  padding:34px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.email-link {
  font:500 clamp(1.4rem,3.4vw,2.8rem)/1.1 var(--display);
  letter-spacing:-.04em;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  word-break:break-all;
}
.email-link::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .6s var(--ease);
}
.email-link:hover::after {
  transform:scaleX(1);
  transform-origin:left;
}
.contact-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 20px;
  border-radius:99px;
  border:1px solid var(--line-2);
  font-weight:500;
  font-size:14px;
  transition:border-color .35s, background .35s, color .35s, transform .5s var(--ease);
}
.pill-btn svg {
  width:18px;
  height:18px;
}
.pill-btn:hover {
  border-color:var(--text);
  transform:translateY(-3px);
}
.pill-btn.li:hover {
  background:#0A66C2;
  border-color:#0A66C2;
  color:#fff;
}
.pill-btn.gh:hover {
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
}
.pill-btn.copy:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
.contact-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:26px;
  color:var(--muted);
  font-size:15px;
}
.contact-meta a {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.contact-meta svg {
  width:16px;
  height:16px;
}
/* ════════════════════════════════════════════════════════════════
   FOOTER, TOAST, DIALOG
   ════════════════════════════════════════════════════════════════ */
.footer {
  border-top:1px solid var(--line);
  padding:28px 0;
  font-size:13px;
  color:var(--muted);
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.footer-controls {
  display:flex;
  align-items:center;
  gap:20px;
}
.motion-toggle {
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:7px 12px;
  border:1px solid var(--line-2);
  border-radius:99px;
  transition:color .3s, border-color .3s;
}
.motion-toggle:hover:not(:disabled) {
  color:var(--text);
  border-color:var(--text);
}
.footer a:hover {
  color:var(--text);
}
.clock {
  font-family:var(--mono);
  font-size:12px;
}
.toast {
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:450;
  transform:translate(-50%,160%);
  padding:12px 20px;
  border-radius:99px;
  background:var(--text);
  color:var(--bg);
  font-weight:500;
  font-size:14px;
  transition:transform .55s var(--ease);
  box-shadow:0 20px 50px -15px #000a;
  pointer-events:none;
}
.toast.visible {
  transform:translate(-50%,0);
}
dialog {
  width:min(560px,calc(100% - 32px));
  padding:0;
  border:1px solid var(--line-2);
  border-radius:20px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 40px 120px -30px #000c;
}
dialog[open] {
  animation:dlg .45s var(--ease);
}
dialog::backdrop {
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter:blur(6px);
}
@keyframes dlg {
  from {
    opacity:0;
    transform:translateY(-14px) scale(.97);
  }
}
.cmd-search {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
}
.cmd-search svg {
  width:18px;
  height:18px;
  color:var(--dim);
  flex:none;
}
.cmd-search input {
  flex:1;
  min-width:0;
  height:60px;
  border:0;
  outline:0;
  background:none;
  font-size:16px;
}
.cmd-search input::placeholder {
  color:var(--dim);
}
.cmd-search kbd {
  font:11px var(--mono);
  color:var(--dim);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:2px 6px;
}
.cmd-list {
  list-style:none;
  margin:0;
  padding:8px;
  max-height:360px;
  overflow:auto;
}
.cmd-group {
  font:10px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  padding:10px 12px 4px;
}
.cmd-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  color:var(--muted);
  cursor:pointer;
  font-size:15px;
}
.cmd-item.sel {
  background:var(--accent-soft);
  color:var(--text);
}
.cmd-foot {
  display:flex;
  gap:18px;
  padding:10px 20px;
  border-top:1px solid var(--line);
  font:11px var(--mono);
  color:var(--dim);
}
/* theme switch: circular reveal */
::view-transition-old(root), ::view-transition-new(root) {
  animation:none;
  mix-blend-mode:normal;
}
.hero .eyebrow {
  margin-bottom:20px;
}

/* Native disclosure and stable enhancement slots work before the client loads. */
.mobile-nav { display:none; }
.menu-toggle::-webkit-details-marker { display:none; }
html:not(.js) [data-enhanced] { visibility:hidden; pointer-events:none; }
[hidden] { display:none !important; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.hero-name {
  color:var(--text);
  font:600 clamp(1.25rem,2.2vw,2rem)/1.3 var(--display);
  letter-spacing:-.03em;
  margin-bottom:10px;
}
.hero-copy, .project-copy, .exp-aside, .timeline, .stack-card { min-width:0; }
.demo-note { color:var(--muted); font:10px/1.6 var(--mono); margin-top:12px; }
.job-actions { display:flex; align-items:center; gap:20px; margin-top:20px; }
.text-button { padding:8px 0; font:11px var(--mono); color:var(--muted); border-bottom:1px solid var(--line-2); }
.cmd-options { list-style:none; padding:0; margin:0; }
.cmd-status:not(.sr-only) { padding:24px 20px; color:var(--muted); font:12px/1.6 var(--mono); }
.exp-description { color:var(--muted); font-size:14px; line-height:1.8; margin:24px 0; }
.experience-stat { display:flex; gap:18px; align-items:center; margin-top:30px; }
.experience-stat strong { font:500 64px/1 var(--display); letter-spacing:-.06em; }
.experience-stat > span { font:11px/1.8 var(--mono); color:var(--muted); }
.section h2 { font-size:clamp(2.4rem,5.4vw,5rem); line-height:1; letter-spacing:-.05em; }
.section h2 .muted { display:block; font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.project-kicker { flex-wrap:wrap; }

/* Preference and visibility have separate lifetimes. */
.motion-paused, .motion-paused *, .motion-paused *::before, .motion-paused *::after {
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}
.motion-paused .reveal.pending { opacity:1; transform:none; }
.motion-paused .magnetic, .motion-paused .tilt, .motion-paused .system-art { transform:none !important; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after,
.effects-offscreen *, .effects-offscreen::before, .effects-offscreen *::before, .effects-offscreen *::after {
  animation-play-state:paused !important;
}
@media (prefers-reduced-motion:reduce) {
  html, *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal.pending { opacity:1; transform:none; }
}

/* Responsive layouts */
@media (max-width:1100px) {
  .hero-grid { grid-template-columns:1fr; gap:38px; }
  .hero { min-height:0; }
  .system { max-width:620px; }
  .company-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stack-grid, .beyond-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .desktop-links { display:none; }
  .mobile-nav { display:block; }
  .mobile-nav .nav-links {
    position:absolute;
    top:76px;
    left:var(--gutter);
    right:var(--gutter);
    flex-direction:column;
    gap:0;
    padding:10px;
    border-radius:18px;
    background:var(--panel);
    border:1px solid var(--line-2);
  }
  .nav-links a { padding:14px; font-size:16px; }
  .nav-links a::after, .nav-contact { display:none; }
  .section-head { grid-template-columns:1fr; }
  .section-intro { justify-self:start; }
  .projects-list { gap:24px; }
  .work-card { grid-template-columns:1fr; }
  .project-visual { border-right:0; border-bottom:1px solid var(--line); min-height:280px; }
  .exp-grid { grid-template-columns:1fr; }
  .exp-aside { position:static; }
  .job-body { padding-right:0; }
}
@media (max-width:640px) {
  .stack-grid, .beyond-grid { grid-template-columns:1fr; }
  .hero { padding-top:108px; }
  .hero-top { flex-wrap:wrap; gap:12px; }
  .company-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .company-link { min-height:108px; padding:20px 16px; }
  .hero-name { font-size:1.45rem; }
  .system { padding:14px; }
  .node { padding:6px 9px 6px 7px; gap:7px; border-radius:11px; }
  .node img { width:16px; height:16px; }
  .node strong { font-size:11px; }
  .node small, .system-meta span:last-child, .command-trigger { display:none; }
  .hello .ln { white-space:normal; }
  .beyond-card { min-height:0; }
  .project-visual { padding:24px; min-height:290px; }
  .project-copy { padding:24px; }
  .pv-label { font-size:9px; }
  .integration { gap:7px; }
  .int-end { padding:9px 6px; font-size:9px; }
  .int-hub { width:50px; height:50px; font-size:12px; }
  .contact-main { min-width:0; }
  .email-link { font-size:clamp(1rem,5.2vw,1.8rem); overflow-wrap:anywhere; }
  .job-toggle { flex-shrink:0; }
}
@media (max-width:400px) {
  .filter { font-size:12px; padding:9px 11px; }
  .filters { max-width:100%; padding:4px; }
}
@media (hover:none), (max-width:700px) {
  .hero-glow::before { opacity:.6; }
  .work-card::before, .stack-card::before, .beyond-card::before { display:none; }
}

/* Printed content uses one palette and includes expanded experience. */
@media print {
  :root, :root[data-theme] {
    --bg:#fff; --panel:#fff; --high:#eee; --text:#111; --muted:#333; --dim:#444;
    --accent:#8d391c; --line:#ccc; --line-2:#ccc;
  }
  body { background:#fff; color:#111; overflow:visible; }
  .header, .system, .grain, .progress, .stack-toolbar, .job-actions, .contact-actions, .footer-controls, .toast, dialog { display:none !important; }
  .wrap { width:100%; }
  .section, .hero, .contact { padding:20px 0; }
  .hero-grid, .exp-grid { display:block; }
  .work-card { display:block; break-inside:avoid; }
  .project-visual { min-height:0; border:0; padding:20px; }
  .tree, .bars, .integration { display:none; }
  .reveal.pending { opacity:1 !important; transform:none !important; }
  h1, .hello { font-size:44px; }
  .job { break-inside:avoid; }
  .job-details::details-content { block-size:auto !important; content-visibility:visible !important; }
}