/* ── Variables ── */
:root {
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --background: #f5f5f7;
  --foreground: #0a0a0f;
  --surface: #eaeaed;
  --card: #ffffff;
  --primary: #4f46e5;
  --primary-fg: #ffffff;
  --muted-fg: #5c5c72;
  --border: #d1d1db;
  --glow: rgba(79,70,229,0.18);
  --grid-line: rgba(10,10,15,0.07);
}
.dark {
  --background: #0d0d14;
  --foreground: #f0f0f5;
  --surface: #16161f;
  --card: #16161f;
  --primary: #818cf8;
  --primary-fg: #0d0d14;
  --muted-fg: #8888a8;
  --border: rgba(255,255,255,0.07);
  --glow: rgba(129,140,248,0.35);
  --grid-line: rgba(255,255,255,0.035);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-color:var(--border);}
html{scroll-behavior:smooth;}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;}
::selection{background:var(--primary);color:var(--primary-fg);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ── Project preview images ── */
.project-preview img {
  width:100%;height:100%;object-fit:cover;object-position:top;
  opacity:1;transition:opacity 0.4s,transform 0.5s;
  filter: saturate(1.1) contrast(1.04);
}
.dark .project-preview img {
  opacity:0.88;
  filter: saturate(1.05) brightness(0.95);
}
.project-card:hover .project-preview img{opacity:1;transform:scale(1.02);}

.bg-grid{
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
}
.container{max-width:72rem;margin:0 auto;padding:0 1.25rem;}
@media(min-width:640px){.container{padding:0 2rem;}}

/* ── Spotlight ── */
#spotlight{
  pointer-events:none;position:fixed;top:0;left:0;z-index:1;
  width:500px;height:500px;border-radius:50%;
  mix-blend-mode:screen;filter:blur(48px);will-change:transform;
  background:radial-gradient(circle,color-mix(in oklab,var(--primary) 35%,transparent),transparent 60%);
  opacity:0.5;
}
html:not(.dark) #spotlight{mix-blend-mode:multiply;opacity:0.15;}

/* ── Header ── */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  background:color-mix(in oklab,var(--background) 82%,transparent);
  border-bottom:1px solid var(--border);
}
nav{
  max-width:72rem;margin:0 auto;padding:0 1.25rem;
  height:3.5rem;display:flex;align-items:center;justify-content:space-between;
}
@media(min-width:640px){nav{padding:0 2rem;}}
.nav-logo{
  font-family:var(--font-display);font-weight:700;font-size:0.875rem;
  display:flex;align-items:center;gap:0.5rem;letter-spacing:-0.02em;flex-shrink:0;
}
.nav-logo-dot{
  width:0.5rem;height:0.5rem;border-radius:50%;flex-shrink:0;
  background:#22c55e;box-shadow:0 0 7px #22c55e99;
  animation:pulse 2s ease-in-out infinite;
}
.nav-logo-dot.inactive{background:#ef4444;box-shadow:0 0 7px #ef444499;}
.nav-links{display:none;align-items:center;gap:0.25rem;font-size:0.875rem;list-style:none;}
@media(min-width:768px){.nav-links{display:flex;}}
.nav-links a{padding:0.375rem 0.75rem;border-radius:9999px;color:var(--muted-fg);transition:color 0.15s,background 0.15s;}
.nav-links a:hover{color:var(--foreground);background:var(--surface);}
#theme-btn{
  width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--border);
  background:transparent;cursor:pointer;display:grid;place-items:center;
  color:var(--foreground);transition:background 0.15s;flex-shrink:0;
}
#theme-btn:hover{background:var(--surface);}
#theme-btn svg{width:1rem;height:1rem;}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:transparent;border:none;padding:4px;}
@media(min-width:768px){.hamburger{display:none;}}
.hamburger span{display:block;width:20px;height:2px;background:var(--foreground);border-radius:2px;transition:transform 0.2s,opacity 0.2s;}
.mobile-menu{
  display:none;position:fixed;top:3.5rem;left:0;right:0;
  background:color-mix(in oklab,var(--background) 96%,transparent);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--border);
  padding:1rem 1.25rem;z-index:49;flex-direction:column;gap:0.5rem;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:0.5rem 0.75rem;border-radius:0.5rem;color:var(--muted-fg);font-size:0.875rem;transition:color 0.15s,background 0.15s;}
.mobile-menu a:hover{color:var(--foreground);background:var(--surface);}
.nav-right{display:flex;align-items:center;gap:0.5rem;}

/* ── Hero ── */
#top{position:relative;padding-top:7rem;padding-bottom:5rem;overflow:hidden;}
@media(min-width:640px){#top{padding-top:9rem;padding-bottom:7rem;}}
@media(min-width:1024px){#top{padding-top:10rem;padding-bottom:8rem;}}
.hero-grid-bg{
  position:absolute;inset:0;opacity:0.7;
  -webkit-mask-image:radial-gradient(ellipse at top,black 30%,transparent 75%);
  mask-image:radial-gradient(ellipse at top,black 30%,transparent 75%);
}
.hero-inner{position:relative;display:grid;gap:3rem;align-items:center;}
@media(min-width:1024px){.hero-inner{grid-template-columns:1.1fr 0.9fr;}}

/* ── Avatar ── */
.avatar-wrap{
  display:flex;align-items:center;gap:0.875rem;margin-bottom:1.75rem;
}
.avatar-img{
  width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;object-position:center;
  border:2px solid var(--border);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 15%,transparent);
  flex-shrink:0;
  transition:box-shadow 0.2s;
}
.avatar-img:hover{
  box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 35%,transparent);
}
.avatar-info{display:flex;flex-direction:column;gap:0.15rem;}
.avatar-name{font-family:var(--font-display);font-weight:600;font-size:0.9rem;letter-spacing:-0.01em;}
.avatar-sub{font-family:var(--font-mono);font-size:0.7rem;color:var(--muted-fg);}

.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.25rem 0.75rem;border-radius:9999px;border:1px solid var(--border);
  background:color-mix(in oklab,var(--surface) 80%,transparent);backdrop-filter:blur(8px);
  font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);margin-bottom:2rem;
}
.hero-badge-dot{width:0.375rem;height:0.375rem;border-radius:50%;background:#22c55e;animation:pulse 2s ease-in-out infinite;flex-shrink:0;}
.hero-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,7vw,4.5rem);line-height:0.95;letter-spacing:-0.02em;}
.hero-h1 .italic-light{font-style:italic;font-weight:300;}
.hero-h1 .muted{color:var(--muted-fg);}
.hero-highlight{position:relative;display:inline-block;}
.hero-highlight::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:0.7rem;background:color-mix(in oklab,var(--primary) 28%,transparent);z-index:-1;}
.hero-p{margin-top:2rem;max-width:36rem;color:var(--muted-fg);font-size:clamp(0.875rem,2vw,1.1rem);line-height:1.75;}
.hero-actions{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;}
.btn-primary{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.75rem 1.25rem;border-radius:9999px;
  background:var(--foreground);color:var(--background);
  font-weight:500;font-size:0.9rem;transition:background 0.15s,color 0.15s;border:none;cursor:pointer;
}
.btn-primary:hover{background:var(--primary);color:var(--primary-fg);}
.btn-primary svg{width:1rem;height:1rem;transition:transform 0.15s;}
.btn-primary:hover svg{transform:translate(2px,2px);}
.hero-location{display:flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);}
.hero-location svg{width:0.875rem;height:0.875rem;flex-shrink:0;}

/* ── Terminal ── */
.terminal-wrap{
  position:relative;
  /* CRITICAL: prevent terminal from affecting layout width */
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.terminal-glow{position:absolute;inset:-1rem;background:color-mix(in oklab,var(--primary) 18%,transparent);filter:blur(48px);border-radius:50%;opacity:0.5;pointer-events:none;}
.terminal{
  position:relative;border-radius:1rem;border:1px solid rgba(255,255,255,0.08);
  background:#0e0e18;
  box-shadow:0 25px 60px -12px rgba(0,0,0,0.6);
  overflow:hidden;display:flex;flex-direction:column;
  /* CRITICAL: prevent terminal from expanding beyond container */
  width:100%;
  max-width:100%;
}
html:not(.dark) .terminal{border-color:rgba(0,0,0,0.12);}
.terminal-header{
  display:flex;align-items:center;gap:0.375rem;
  padding:0.75rem 1rem;border-bottom:1px solid rgba(255,255,255,0.05);
  background:#141420;flex-shrink:0;
  /* prevent header from stretching */
  min-width:0;
  overflow:hidden;
}
.dot-red{width:0.75rem;height:0.75rem;border-radius:50%;background:#ff5f57;flex-shrink:0;}
.dot-yellow{width:0.75rem;height:0.75rem;border-radius:50%;background:#febc2e;flex-shrink:0;}
.dot-green{width:0.75rem;height:0.75rem;border-radius:50%;background:#28c840;flex-shrink:0;}
.terminal-title{margin-left:0.75rem;font-family:var(--font-mono);font-size:0.6875rem;color:rgba(255,255,255,0.3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.terminal-hint{font-family:var(--font-mono);font-size:0.6rem;color:rgba(255,255,255,0.2);flex-shrink:0;}
.terminal-output{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem 1.25rem 0.5rem;
  font-family:var(--font-mono);font-size:0.785rem;line-height:1.65;
  min-height:270px;max-height:340px;
  /* CRITICAL: contain content width */
  width:100%;
  max-width:100%;
  word-break:break-all;
  overflow-wrap:break-word;
}
.terminal-output::-webkit-scrollbar{width:4px;}
.terminal-output::-webkit-scrollbar-track{background:transparent;}
.terminal-output::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}
.term-input-row{
  display:flex;align-items:center;
  padding:0.6rem 1.25rem 1rem;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,0.05);
  /* prevent row from stretching */
  min-width:0;
  overflow:hidden;
}
.term-ps-user{font-family:var(--font-mono);font-size:0.785rem;color:#86efac;white-space:nowrap;flex-shrink:0;}
.term-ps-arrow{font-family:var(--font-mono);font-size:0.785rem;color:rgba(255,255,255,0.25);margin:0 0.35rem;white-space:nowrap;flex-shrink:0;}
#term-input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  font-family:var(--font-mono);font-size:0.785rem;color:#e2e8f0;
  caret-color:#86efac;
  /* CRITICAL: prevent input from expanding beyond container */
  width:0;
  overflow:hidden;
}
#term-input::placeholder{color:rgba(255,255,255,0.15);}

/* Terminal line classes */
.tl{
  margin-bottom:0.3rem;
  /* CRITICAL: prevent lines from expanding terminal width */
  max-width:100%;
  overflow:hidden;
}
.tc-out{color:rgba(220,220,240,0.65);}
.tc-ok{color:#4ade80;}
.tc-err{color:#f87171;}
.tc-warn{color:#fbbf24;}
.tc-info{color:#67e8f9;font-weight:600;}
.tc-dim{color:rgba(180,180,200,0.45);}
.tc-link{color:#60a5fa;text-decoration:underline;cursor:pointer;}
.tc-echo-user{color:#86efac;}
.tc-echo-arrow{color:rgba(255,255,255,0.25);}
.tc-echo-cmd{color:#e2e8f0;}
.term-cursor::after{content:'▋';color:#86efac;animation:blink 0.7s step-end infinite;}

/* All terminal text spans – enforce word wrap */
.tl span, .tl pre, .tl a {
  font-family:var(--font-mono);
  font-size:0.785rem;
  display:block;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:break-word;
  max-width:100%;
}
/* Pre blocks in terminal */
.tl pre {
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:break-word;
}

/* ── Marquee ── */
.marquee-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--surface) 40%,transparent);overflow:hidden;position:relative;z-index:10;}
.marquee-track{display:flex;gap:3rem;padding:1.125rem 0;white-space:nowrap;animation:marquee 40s linear infinite;font-family:var(--font-display);font-size:clamp(1rem,3vw,1.75rem);color:var(--muted-fg);}
.marquee-item{display:inline-flex;align-items:center;gap:3rem;}
.marquee-dot{display:inline-block;width:0.35rem;height:0.35rem;border-radius:50%;background:var(--primary);flex-shrink:0;}

/* ── Sections ── */
section{position:relative;border-top:1px solid var(--border);padding:5rem 0;}
@media(min-width:640px){section{padding:8rem 0;}}
.sec-label{font-family:var(--font-mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted-fg);}
.sec-title{margin-top:0.75rem;font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:600;}

/* ── About ── */
.about-grid{display:grid;gap:2.5rem;}
@media(min-width:768px){.about-grid{grid-template-columns:4fr 8fr;}}
.about-body{display:flex;flex-direction:column;gap:1.25rem;font-size:clamp(0.875rem,2vw,1.1rem);line-height:1.8;color:var(--muted-fg);}
.about-body strong{color:var(--foreground);font-weight:500;}

/* ── Now ── */
#now{background:color-mix(in oklab,var(--surface) 40%,transparent);}
.now-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem;}
.now-updated{font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);}
.now-cards{display:grid;gap:1rem;}
@media(min-width:640px){.now-cards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.now-cards{grid-template-columns:repeat(3,1fr);}}
.now-card{padding:1.5rem;border-radius:1rem;background:var(--card);border:1px solid var(--border);transition:border-color 0.2s;}
.now-card:hover{border-color:color-mix(in oklab,var(--primary) 50%,transparent);}
.now-icon{width:2.5rem;height:2.5rem;border-radius:0.75rem;background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--primary);display:grid;place-items:center;margin-bottom:1.25rem;transition:background 0.2s,color 0.2s;}
.now-card:hover .now-icon{background:var(--primary);color:var(--primary-fg);}
.now-icon svg{width:1.25rem;height:1.25rem;}
.now-card h3{font-family:var(--font-display);font-weight:600;font-size:1.1rem;}
.now-card p{margin-top:0.5rem;font-size:0.875rem;color:var(--muted-fg);line-height:1.6;}

/* ── Stack ── */
.stack-grid{display:grid;grid-template-columns:1fr;border:1px solid var(--border);border-radius:1rem;overflow:hidden;gap:1px;background:var(--border);}
@media(min-width:640px){.stack-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.stack-grid{grid-template-columns:repeat(4,1fr);}}
.stack-group{background:var(--background);padding:1.5rem;}
.stack-group-label{font-family:var(--font-mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted-fg);margin-bottom:1rem;}
.stack-items{display:flex;flex-direction:column;gap:0.5rem;}
.stack-item{display:flex;align-items:center;gap:0.75rem;font-family:var(--font-display);font-size:1rem;padding:0.5rem 0.625rem;border-radius:0.5rem;cursor:default;transition:background 0.15s,transform 0.15s;position:relative;}
.stack-item:hover{background:color-mix(in oklab,var(--primary) 10%,transparent);transform:translateX(4px);}
.stack-item i{font-size:1.25rem;width:1.5rem;text-align:center;flex-shrink:0;}
.stack-item .item-name{flex:1;min-width:0;}
.stack-item .tip{
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--card);border:1px solid var(--border);border-radius:0.5rem;
  padding:0.3rem 0.6rem;font-family:var(--font-mono);font-size:0.6875rem;
  color:var(--muted-fg);white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity 0.15s;z-index:100;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
@media(max-width:1023px){.stack-item .tip{left:0;top:calc(100% + 4px);transform:none;}}
.stack-item:hover .tip{opacity:1;}

/* ── Work ── */
#work{background:color-mix(in oklab,var(--surface) 40%,transparent);}
.work-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem;}
.work-header p{margin-top:0.75rem;color:var(--muted-fg);max-width:32rem;font-size:0.95rem;}
.all-repos{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);transition:color 0.15s;white-space:nowrap;}
.all-repos:hover{color:var(--foreground);}
.all-repos svg{width:0.875rem;height:0.875rem;transition:transform 0.15s;}
.all-repos:hover svg{transform:translate(2px,-2px);}
.projects-grid{display:grid;gap:1.25rem;}
@media(min-width:1024px){.projects-grid{grid-template-columns:repeat(2,1fr);}}
.view-more-wrap{margin-top:2.5rem;display:flex;justify-content:center;}
.view-more-btn{
  display:inline-flex;align-items:center;gap:0.625rem;
  padding:0.75rem 1.75rem;border-radius:9999px;
  border:1px solid var(--border);background:var(--card);
  color:var(--foreground);font-family:var(--font-display);
  font-weight:500;font-size:0.9rem;
  transition:background 0.15s,border-color 0.2s,transform 0.15s;
}
.view-more-btn:hover{background:var(--surface);border-color:color-mix(in oklab,var(--primary) 60%,transparent);transform:translateY(-1px);}
.view-more-btn svg{width:1rem;height:1rem;color:var(--muted-fg);}
.project-card{position:relative;padding:1.25rem;border-radius:1rem;background:var(--card);border:1px solid var(--border);transition:border-color 0.2s,transform 0.2s;}
@media(min-width:640px){.project-card{padding:1.5rem;}}
.project-card:hover{border-color:color-mix(in oklab,var(--primary) 50%,transparent);transform:translateY(-2px);}
.project-card.span-2{grid-column:1 / -1;}
.project-preview{aspect-ratio:16/10;border-radius:0.75rem;border:1px solid var(--border);overflow:hidden;position:relative;background:var(--surface);}
.project-preview-overlay{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in oklab,var(--card) 30%,transparent),transparent);pointer-events:none;}
.project-fallback{aspect-ratio:16/10;border-radius:0.75rem;border:1px solid var(--border);background:var(--surface);overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;}
.project-fallback-bg{position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:40px 40px;}
.project-fallback-name{position:relative;font-family:var(--font-display);font-size:clamp(1.5rem,5vw,2.75rem);font-weight:700;color:color-mix(in oklab,var(--foreground) 14%,transparent);text-align:center;user-select:none;}
.project-fallback-tag{position:relative;margin-top:0.5rem;font-family:var(--font-mono);font-size:0.6875rem;color:var(--muted-fg);text-align:center;}
.project-meta{margin-top:1.25rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.project-info{min-width:0;flex:1;}
.project-badges{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-bottom:0.375rem;}
.status-dot{display:inline-flex;align-items:center;gap:0.375rem;font-family:var(--font-mono);font-size:0.625rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted-fg);}
.status-dot span{width:0.375rem;height:0.375rem;border-radius:50%;flex-shrink:0;}
.status-live span{background:#22c55e;}
.status-wip span{background:#fbbf24;animation:pulse 2s ease-in-out infinite;}
.status-archived span{background:var(--muted-fg);}
.project-year{font-family:var(--font-mono);font-size:0.625rem;color:var(--muted-fg);}
.project-name{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.5rem);font-weight:600;line-height:1.2;margin-top:0.375rem;}
.project-tagline{font-family:var(--font-mono);font-size:0.75rem;color:var(--primary);margin-top:0.125rem;}
.project-featured{display:inline-flex;margin-top:0.75rem;padding:0.2rem 0.6rem;border-radius:9999px;background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary);font-family:var(--font-mono);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;}
.project-actions{display:flex;align-items:center;gap:0.5rem;flex-shrink:0;}
.icon-btn{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--border);background:transparent;display:grid;place-items:center;color:var(--foreground);transition:background 0.15s;text-decoration:none;}
.icon-btn:hover{background:var(--surface);}
.icon-btn-filled{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--foreground);color:var(--background);border:none;display:grid;place-items:center;transition:background 0.15s,color 0.15s;text-decoration:none;}
.icon-btn-filled:hover{background:var(--primary);color:var(--primary-fg);}
.icon-btn svg,.icon-btn-filled svg{width:1rem;height:1rem;}
.project-desc{margin-top:0.75rem;font-size:0.875rem;color:var(--muted-fg);line-height:1.6;}
.project-tags{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:1rem;}
.tag{padding:0.25rem 0.5rem;border-radius:0.375rem;background:var(--surface);border:1px solid var(--border);font-family:var(--font-mono);font-size:0.6875rem;color:var(--muted-fg);}

/* ── Contact ── */
#contact{overflow:hidden;}
.contact-grid-bg{position:absolute;inset:0;opacity:0.5;-webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);}
.contact-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:50rem;height:25rem;border-radius:50%;background:color-mix(in oklab,var(--primary) 20%,transparent);filter:blur(48px);opacity:0.4;pointer-events:none;}
.contact-inner{position:relative;text-align:center;}
.contact-h2{margin-top:1rem;font-family:var(--font-display);font-size:clamp(2rem,8vw,5rem);font-weight:700;letter-spacing:-0.02em;line-height:1.05;}
.contact-h2 .italic-light{font-style:italic;font-weight:300;color:var(--muted-fg);}
.contact-p{margin-top:1.5rem;max-width:32rem;margin-left:auto;margin-right:auto;color:var(--muted-fg);line-height:1.7;font-size:0.95rem;}
.contact-email-btn{display:inline-flex;align-items:center;gap:0.5rem;margin-top:2.5rem;padding:0.75rem 1.5rem;border-radius:9999px;background:var(--foreground);color:var(--background);font-weight:500;transition:background 0.15s,color 0.15s;}
.contact-email-btn:hover{background:var(--primary);color:var(--primary-fg);}
.contact-email-btn svg{width:1rem;height:1rem;}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-top:2.5rem;}
.social-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:9999px;border:1px solid var(--border);background:var(--card);font-size:0.875rem;transition:background 0.15s;}
.social-btn:hover{background:var(--surface);}
.social-btn svg{width:1rem;height:1rem;color:var(--muted-fg);}
footer{position:relative;margin-top:4rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);padding-top:1.5rem;border-top:1px solid var(--border);}

/* ── Mobile specific tweaks ── */
@media(max-width:640px){
  .hero-h1{font-size:clamp(1.75rem,9vw,2.5rem);}
  .terminal-output{min-height:220px;max-height:280px;}
  .stack-item .tip{display:none;} /* avoid overflow on small screens */
  .contact-h2{font-size:clamp(1.75rem,8vw,3rem);}
  .socials{gap:0.375rem;}
  .social-btn{font-size:0.8rem;padding:0.4rem 0.75rem;}
}

/* ── Animations ── */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-33.333%);}}
@keyframes confettiFall{0%{top:-2rem;opacity:1;}100%{top:110vh;opacity:0;}}
@keyframes sudoIn{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:scale(1);}}
@keyframes sudoOut{from{opacity:1;}to{opacity:0;}}
@keyframes matrixFade{from{opacity:0;}to{opacity:1;}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── Terminal light mode ── */
html:not(.dark) .terminal{
  background:#f8f8fc;
  border-color:rgba(0,0,0,0.10);
  box-shadow:0 8px 32px -4px rgba(0,0,0,0.12);
}
html:not(.dark) .terminal-header{background:#eeeef4;border-bottom-color:rgba(0,0,0,0.07);}
html:not(.dark) .terminal-title{color:rgba(0,0,0,0.35);}
html:not(.dark) .terminal-hint{color:rgba(0,0,0,0.2);}
html:not(.dark) .terminal-output{color:#1a1a2e;}
html:not(.dark) .term-input-row{border-top-color:rgba(0,0,0,0.07);}
html:not(.dark) .term-ps-user{color:#16a34a;}
html:not(.dark) .term-ps-arrow{color:rgba(0,0,0,0.25);}
html:not(.dark) #term-input{color:#1a1a2e;caret-color:#16a34a;}
html:not(.dark) #term-input::placeholder{color:rgba(0,0,0,0.2);}
html:not(.dark) .tc-out{color:rgba(30,30,60,0.7);}
html:not(.dark) .tc-ok{color:#16a34a;}
html:not(.dark) .tc-err{color:#dc2626;}
html:not(.dark) .tc-warn{color:#d97706;}
html:not(.dark) .tc-info{color:#0284c7;font-weight:600;}
html:not(.dark) .tc-dim{color:rgba(30,30,60,0.35);}
html:not(.dark) .tc-link{color:#2563eb;}
html:not(.dark) .tc-echo-user{color:#16a34a;}
html:not(.dark) .tc-echo-arrow{color:rgba(0,0,0,0.25);}
html:not(.dark) .tc-echo-cmd{color:#1a1a2e;}
html:not(.dark) .term-cursor::after{color:#16a34a;}
html:not(.dark) .terminal-output::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);}

/* ── Birthday banner ── */
#bday-banner{
  position:relative;z-index:200;
  background:linear-gradient(90deg,color-mix(in oklab,var(--primary) 20%,transparent),color-mix(in oklab,var(--primary) 10%,transparent));
  border-bottom:1px solid color-mix(in oklab,var(--primary) 30%,transparent);
  text-align:center;padding:0.6rem 1rem;
  font-family:var(--font-display);font-size:0.875rem;color:var(--foreground);
}
#bday-banner strong{color:var(--primary);}

/* ── Sudo 404 overlay ── */
#sudo-404{
  position:fixed;inset:0;z-index:9000;
  background:rgba(5,0,0,0.97);
  display:flex;align-items:center;justify-content:center;
  animation:sudoIn 0.3s ease;
  cursor:pointer;
}
#sudo-404.sudo-exit{animation:sudoOut 0.3s ease forwards;}
.sudo-inner{text-align:center;padding:2rem;max-width:36rem;}
.sudo-art{
  font-family:var(--font-mono);font-size:clamp(0.5rem,1.5vw,1rem);
  color:#ef4444;line-height:1.3;white-space:pre;display:block;margin-bottom:1.5rem;
}
.sudo-title{font-family:var(--font-display);font-size:clamp(1rem,3vw,1.5rem);color:#ef4444;font-weight:700;letter-spacing:0.08em;margin-bottom:0.75rem;}
.sudo-sub{font-family:var(--font-mono);font-size:0.75rem;color:rgba(255,100,100,0.6);margin-bottom:1.5rem;letter-spacing:0.05em;}
.sudo-bar{width:100%;height:6px;background:rgba(255,0,0,0.15);border-radius:3px;overflow:hidden;margin-bottom:1rem;}
.sudo-fill{height:100%;background:#ef4444;width:0%;transition:width 0.1s linear;border-radius:3px;}
.sudo-count{font-family:var(--font-mono);font-size:0.75rem;color:rgba(220,100,100,0.7);margin-bottom:1.5rem;min-height:1.2em;}
.sudo-esc{font-family:var(--font-mono);font-size:0.65rem;color:rgba(255,255,255,0.18);}

/* ── Matrix overlay ── */
#matrix-overlay{
  position:fixed;inset:0;z-index:8999;background:#000;
  cursor:pointer;animation:matrixFade 0.4s ease;
}
#matrix-canvas{display:block;}

/* ── Archived projects section ── */
.archived-section{margin-top:2.5rem;}
.archived-toggle{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:1rem 1.25rem;border-radius:0.75rem;
  border:1px solid var(--border);background:var(--card);
  cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  transition:border-color 0.2s,background 0.15s;
  user-select:none;
}
.archived-toggle::-webkit-details-marker{display:none;}
.archived-toggle::marker{display:none;}
.archived-toggle:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent);background:var(--surface);}
.archived-toggle::after{content:'↓';font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);transition:transform 0.2s;}
details[open] .archived-toggle::after{transform:rotate(180deg);}
.archived-count{font-family:var(--font-mono);font-size:0.75rem;color:var(--muted-fg);font-weight:400;margin-left:0.5rem;}
.archived-hint{font-family:var(--font-mono);font-size:0.7rem;color:var(--muted-fg);font-weight:400;}
.archived-grid{margin-top:1rem;}

/* ── PyPI badge ── */
.pypi-badge{display:inline-flex;align-items:center;margin-left:0.25rem;vertical-align:middle;}
.pypi-badge img{height:18px;width:auto;border-radius:3px;}
/* ── Timeline / Journey ── */
.timeline-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 1rem;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.timeline-scroll-wrap::-webkit-scrollbar { height: 4px; }
.timeline-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.timeline-track {
  display: flex;
  gap: 0;
  min-width: max-content;
  padding: 0 1rem 2rem;
  align-items: flex-start;
  position: relative;
}
.timeline-track::before {
  content: '';
  position: absolute;
  top: 2.6rem;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: linear-gradient(to right, var(--border), color-mix(in oklab, var(--primary) 40%, transparent), var(--border));
}
.tl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  flex-shrink: 0;
}
.tl-year {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--node-color, var(--primary));
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.tl-connector {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--node-color, var(--primary));
  border: 3px solid var(--background);
  outline: 2px solid var(--node-color, var(--primary));
  flex-shrink: 0;
  transition: transform 0.2s;
  position: relative;
  z-index: 1;
}
.tl-node:hover .tl-connector { transform: scale(1.3); }
.tl-card {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  width: 180px;
  transition: border-color 0.2s, transform 0.2s;
}
.tl-node:hover .tl-card {
  border-color: var(--node-color, var(--primary));
  transform: translateY(-3px);
}
.tl-icon { font-size: 1.25rem; display: block; margin-bottom: 0.5rem; }
.tl-card h4 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--node-color, var(--primary));
}
.tl-card p {
  font-size: 0.75rem;
  color: var(--muted-fg);
  line-height: 1.55;
}

/* ── Currently Learning ── */
.learning-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.learning-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}
.learning-grid {
  display: grid;
  gap: 1rem;
}
@media(min-width: 640px) { .learning-grid { grid-template-columns: repeat(3, 1fr); } }
.learn-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.learn-card:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.learn-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.learn-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}
.learn-pct {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.learn-detail {
  font-size: 0.8rem;
  color: var(--muted-fg);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.learn-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.learn-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Availability Calendar ── */
.avail-header { margin-bottom: 2.5rem; }
.avail-table {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 100%;
}
.avail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.avail-head .avail-day-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
  text-align: center;
  flex: 1;
}
.avail-slot-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted-fg);
  width: 5rem;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.avail-cell {
  flex: 1;
  height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  transition: transform 0.15s, filter 0.15s;
  cursor: default;
}
.avail-cell:hover { transform: scale(1.08); filter: brightness(1.15); }
.avail-free   { background: #22c55e33; border-color: #22c55e44; }
.avail-limited{ background: #fbbf2433; border-color: #fbbf2444; }
.avail-busy   { background: var(--surface); border-color: var(--border); }
.avail-legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.avail-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-fg);
}
.avail-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
}
.avail-dot.avail-free    { background: #22c55e55; border: 1px solid #22c55e66; }
.avail-dot.avail-limited { background: #fbbf2455; border: 1px solid #fbbf2466; }
.avail-dot.avail-busy    { background: var(--surface); border: 1px solid var(--border); }
.avail-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted-fg);
}

/* ── Contact Form ── */
.contact-form-wrap {
  width: 100%;
  max-width: 36rem;
  margin: 2.5rem auto 0;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem;
}
.contact-form-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--foreground);
}
.form-row {
  display: grid;
  gap: 1rem;
}
@media(min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.form-group label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
}
.form-group input,
.form-group textarea {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.15s;
  resize: none;
  width: 100%;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted-fg);
  opacity: 0.6;
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-top: 0.25rem;
}
.form-submit:hover { background: var(--primary); color: var(--primary-fg); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.form-submit svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
.form-submit:not(:disabled):hover svg { transform: translate(2px, 0); }
.form-status {
  margin-top: 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  min-height: 1.1em;
}
.form-status-ok  { color: #22c55e; }
.form-status-err { color: #f87171; }

/* ── Footer extras ── */
.footer-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer-sep { color: var(--border); }