/* ===== Tokens ===== */
:root{
  --bg: #0e0e0e;
  --bg-alt: #151515;
  --line: #2a2a2a;
  --fg: #f2f2ee;
  --fg-dim: #8f8f8a;
  --accent: #c3fffc;
  --accent-dim: #6f8f8d;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--display); margin:0; }
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
ol{ list-style:none; margin:0; padding:0; }
button, input, textarea{ font-family: var(--mono); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:#0e0e0e;
  padding:8px 12px; z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }

/* ===== Status bar ===== */
.statusbar{
  position: fixed; top:0; left:0; right:0; z-index:150;
  display:flex; gap: 24px; align-items:center;
  padding: 6px 20px;
  background: #000;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  overflow-x:auto;
  white-space:nowrap;
}
.statusbar-item{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:6px; height:6px; border-radius:50%; background: var(--fg-dim); display:inline-block; }
.dot--live{ background: #6bffb0; box-shadow: 0 0 6px #6bffb0; animation: pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
#pipelineState{ color: var(--accent); }

/* ===== Nav ===== */
.nav{
  position: sticky; top: 27px; z-index: 140;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  background: rgba(14,14,14,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-logo{
  font-family: var(--mono); font-weight:600; font-size:14px; letter-spacing:0.05em;
}
.nav-logo-sub{ color: var(--fg-dim); font-weight:400; }
.nav-links{ display:flex; gap: 28px; font-family: var(--mono); font-size:12px; letter-spacing:0.06em; }
.nav-links a{ color: var(--fg-dim); transition: color .2s; }
.nav-links a:hover, .nav-links a:focus-visible{ color: var(--accent); }
.nav-cta{
  font-family: var(--mono); font-size:11px; letter-spacing:0.06em;
  border: 1px solid var(--line); color: var(--fg-dim);
  padding: 7px 14px; border-radius: 20px; transition: border-color .2s, color .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.nav-cta::before{
  content:''; width:6px; height:6px; border-radius:50%; background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.nav-cta:hover{ border-color: var(--accent); color: var(--accent); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.nav-toggle span{ width:22px; height:2px; background:var(--fg); display:block; }
.nav-mobile{
  display:none; flex-direction:column; position:sticky; top:75px; z-index:139;
  background: var(--bg); border-bottom:1px solid var(--line);
}
.nav-mobile a{ padding:16px 24px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:14px; letter-spacing:0.06em; color: var(--fg-dim); }
.nav-mobile.open{ display:flex; }

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

/* ===== Hero ===== */
.hero{
  position:relative;
  padding: clamp(80px,14vw,160px) clamp(20px,4vw,56px) 60px;
  max-width: var(--maxw); margin:0 auto;
}
.eyebrow{
  font-family: var(--mono); font-size:12px; letter-spacing:0.14em; color: var(--accent);
  text-transform: uppercase; margin-bottom:4px;
}
.eyebrow--sub{ color: var(--fg-dim); margin-bottom: 28px; }
.hero-name{
  position:relative;
  font-size: clamp(48px, 11vw, 128px);
  font-weight:700; line-height:0.92; letter-spacing:-0.02em;
  margin: 0 0 28px;
}
.hero-name-ghost{
  position:absolute; top:-0.15em; left:0; right:0;
  color: transparent; -webkit-text-stroke: 1px var(--line);
  overflow:hidden; white-space:nowrap; z-index:0; user-select:none;
  font-size: 0.5em;
}
.hero-name-main{ position:relative; z-index:1; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap: 10px 28px;
  font-family: var(--mono); font-size:12px; letter-spacing:0.06em; color: var(--fg-dim);
  padding-top: 20px; border-top: 1px solid var(--line);
}
.scroll-cue{
  display:inline-block; margin-top:56px; font-family:var(--mono); font-size:12px;
  color: var(--fg-dim); letter-spacing:0.1em; animation: bob 2s infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ===== Toolkit strip / marquee ===== */
.strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 24px 0; overflow:hidden;
}
.strip-label{
  font-family: var(--mono); font-size:11px; letter-spacing:0.14em; color: var(--fg-dim);
  text-align:center; margin-bottom:16px;
}
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex; gap:48px; width:max-content;
  animation: scroll-left 22s linear infinite;
  will-change: transform;
}
.marquee-track span{
  font-family: var(--display); font-weight:600; font-size: clamp(20px,3vw,32px);
  color: var(--fg-dim); white-space:nowrap;
}
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* ===== Sections ===== */
.section{
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(64px,10vw,120px) clamp(20px,4vw,56px);
}
.section, .hero, .stack-note{
  scroll-margin-top: 112px;
}
.section-head{
  display:grid; grid-template-columns: auto 1fr; column-gap:16px; align-items:end;
  margin-bottom: 48px; border-bottom:1px solid var(--line); padding-bottom:20px;
}
.section-num{
  font-family: var(--mono); font-size:14px; color: var(--accent); grid-row: 1 / 3;
}
.section-count{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--fg-dim);
  justify-self:end;
}
.section-head h2{
  grid-column: 2; font-size: clamp(28px,4vw,44px); letter-spacing:-0.01em;
}

/* Work */
.work-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background:var(--line); }
.work-card{
  background: var(--bg); padding: 32px; display:flex; flex-direction:column; gap:16px;
  transition: background .25s;
}
.work-card:hover{ background: var(--bg-alt); }
.work-card:hover .work-link{ color: var(--accent); }
.work-card-top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color: var(--fg-dim); }
.work-tag{ color: var(--accent-dim); }
.work-card h3{ font-size: 22px; }
.work-card p{ color: var(--fg-dim); font-size:14px; }
.work-stats{ display:flex; gap: 24px; margin-top:auto; padding-top:12px; }
.work-stats div{ display:flex; flex-direction:column; gap:2px; }
.work-stats strong{ font-family: var(--mono); font-size:16px; color: var(--accent); }
.work-stats span{ font-family: var(--mono); font-size:9px; letter-spacing:0.06em; color: var(--fg-dim); }
.work-link{ font-family: var(--mono); font-size:12px; letter-spacing:0.06em; color: var(--fg-dim); transition: color .2s; }

@media (max-width: 780px){
  .work-list{ grid-template-columns: 1fr; }
}

/* Skills */
.skills-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background:var(--line); }
.skill-card{ background: var(--bg); padding: 28px 20px; }
.skill-index{ font-family:var(--mono); font-size:11px; color: var(--accent); }
.skill-card h3{ font-size:16px; margin: 14px 0 8px; }
.skill-card p{ font-size:12px; color: var(--fg-dim); line-height:1.6; }
@media (max-width: 980px){ .skills-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .skills-grid{ grid-template-columns: 1fr; } }

/* Certs */
.cert-list{ display:flex; flex-direction:column; }
.cert-row{ display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.cert-id{ font-family:var(--mono); font-size:12px; color: var(--fg-dim); width:32px; flex-shrink:0; }
.cert-body h3{ font-size:18px; font-family: var(--display); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cert-body p{ font-family:var(--mono); font-size:12px; color: var(--fg-dim); margin-top:6px; }
.cert-status{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; padding:3px 8px; border-radius:2px; border:1px solid var(--line); color: var(--fg-dim); }
.cert-status--live{ color: #6bffb0; border-color: #2a4a3a; }

/* About */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.about-coord{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color: var(--fg-dim); margin-bottom:16px; }
.about-statement{ font-family: var(--display); font-size: clamp(20px,2.4vw,28px); line-height:1.35; margin-bottom:24px; }
.about-tags{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:12px; color: var(--fg-dim); }
.timeline-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--accent); margin: 0 0 12px; }
.about-timeline ol{ margin-bottom: 32px; }
.about-timeline li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; padding: 12px 0; border-bottom:1px solid var(--line); }
.about-timeline h3{ font-size:16px; flex-basis:100%; }
.timeline-role{ font-family:var(--mono); font-size:12px; color: var(--fg-dim); }
.timeline-date{ font-family:var(--mono); font-size:12px; color: var(--fg-dim); }
.about-cta{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color: var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; }

@media (max-width: 780px){ .about-grid{ grid-template-columns:1fr; } }

/* Foundations */
.foundations{ margin-top:72px; border-top:1px solid var(--line); padding-top:40px; }
.foundations-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--fg-dim); margin-bottom:24px; }
.foundations-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:32px; }
.foundations-index{ font-family:var(--mono); font-size:12px; color: var(--accent); }
.foundations-grid h3{ font-size:16px; margin: 12px 0 8px; }
.foundations-grid p{ font-size:13px; color: var(--fg-dim); }
@media (max-width: 780px){ .foundations-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .foundations-grid{ grid-template-columns: 1fr; } }

/* Stack note */
.stack-note{
  margin-top:40px; display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:4px; padding:20px 24px;
  background: var(--bg-alt);
}
.stack-note-icon{ color: var(--accent); font-size:14px; line-height:1.6; }
.stack-note-title{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--fg-dim); margin-bottom:8px; }
.stack-note-body{ font-size:14px; color: var(--fg-dim); line-height:1.6; max-width: 640px; }
.stack-note-body strong{ color: var(--fg); font-weight:600; }

/* Contact */
.contact-links{ display:flex; flex-direction:column; gap:0; max-width: 640px; }
.contact-links--solo{ margin: 0 auto; }
.contact-links a{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:20px 0; border-bottom:1px solid var(--line); transition: color .2s; }
.contact-links a:hover{ color: var(--accent); }
.contact-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--fg-dim); }
.contact-value{ font-family:var(--display); font-size:16px; }

/* Footer */
.footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding: 28px clamp(20px,4vw,56px); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color: var(--fg-dim);
}
.footer a:hover{ color: var(--accent); }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }