:root{
  --bg: #0a0a0a;
  --bg-raised: #121212;
  --line: #262626;
  --line-soft: #1a1a1a;
  --ink: #e8e8e6;
  --ink-dim: #8a8a88;
  --ink-faint: #4d4d4b;
  --white: #f5f5f3;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--white); color:var(--bg); }

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

/* faint scanline / grid texture, pure grey, no color */
.grid-bg{
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  opacity:0.5;
}

/* ---------- header ---------- */
.chrome{
  position:sticky; top:0; z-index:10;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.chrome-inner{
  max-width:960px; margin:0 auto;
  padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:13px;
}
.chrome-path{ color:var(--ink-dim); }
.chrome-path b{ color:var(--ink); font-weight:500; }
.chrome-nav{ display:flex; gap:24px; }
.chrome-nav a{
  color:var(--ink-dim); position:relative; padding:2px 0;
  transition:color .15s ease;
}
.chrome-nav a::before{ content:"./"; color:var(--ink-faint); }
.chrome-nav a:hover{ color:var(--white); }
.chrome-nav a:focus-visible, a:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }

/* ---------- hero ---------- */
.hero{ padding:96px 24px 72px; border-bottom:1px solid var(--line); }
.hero-inner{ max-width:960px; margin:0 auto; }

.hero-path{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(26px, 4.4vw, 44px);
  letter-spacing:-0.02em;
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.seg-dim{ color:var(--ink-faint); }
.seg-accent{ color:var(--white); border-bottom:1px solid var(--ink); }
.cursor{
  display:inline-block; width:0.5ch; height:1em; margin-left:6px;
  background:var(--white);
  animation: blink 1.1s steps(1) infinite;
  transform:translateY(2px);
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-tagline{
  margin-top:22px; max-width:60ch;
  color:var(--ink); font-size:16.5px; line-height:1.75;
}
.hero-tagline .prompt{ color:var(--ink); font-family:var(--mono); margin-right:8px; }

.hero-stats{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--line);
}
.hero-stat{
  padding:18px 20px;
  border-right:1px solid var(--line);
}
.hero-stat:last-child{ border-right:none; }
.hero-stat .k{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;
}
.hero-stat .v{ font-family:var(--mono); font-size:18px; font-weight:600; color:var(--ink); }
.hero-stat .v.accent{ color:var(--white); }

/* ---------- sections ---------- */
.section{ max-width:960px; margin:0 auto; padding:64px 24px; border-bottom:1px solid var(--line); }
.section:last-of-type{ border-bottom:none; }

.cmd-line{
  font-family:var(--mono); font-size:13px; color:var(--ink-faint);
  margin-bottom:10px;
}
.cmd-line .user{ color:var(--ink-dim); }
.cmd-line .sep{ color:var(--ink-faint); }
.cmd-line .path{ color:var(--ink); }
.cmd-line .cmd{ color:var(--ink); margin-left:6px; }

.section-title{
  font-family:var(--mono); font-size:22px; font-weight:600;
  letter-spacing:-0.01em; margin-bottom:32px;
  display:flex; align-items:center; gap:10px;
}
.hash{ color:var(--ink-faint); font-weight:400; }

/* ---------- skills ---------- */
.skills-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  border:1px solid var(--line);
}
.skill-file{
  padding:20px 22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.skill-file:hover{ background:var(--bg-raised); }
.skill-file:nth-child(2n){ border-right:none; }
.skill-file:nth-last-child(-n+2){ border-bottom:none; }
.skill-file .name{
  font-family:var(--mono); font-size:14.5px; font-weight:600; color:var(--white);
  margin-bottom:8px;
}
.skill-file .name .ext{ color:var(--ink-faint); font-weight:400; }
.skill-file .desc{ font-size:14px; color:var(--ink); line-height:1.65; }

/* ---------- about ---------- */
.about-wrap{
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px;
}
.about-body p{
  color:var(--ink);
  margin-bottom:20px;
  font-size:16.5px;
  line-height:1.85;
  max-width:60ch;
}
.about-body p:last-child{ margin-bottom:0; }

.about-terminal{
  border:1px solid var(--line); padding:20px;
  align-self:start; background:var(--bg-raised);
}
.about-terminal .row{
  display:flex; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:13px;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.about-terminal .row:last-child{ border-bottom:none; }
.about-terminal .k{ color:var(--ink-faint); }
.about-terminal .v{ color:var(--ink); text-align:right; }
.about-terminal .v.green{ color:var(--white); }
.about-terminal .v.green::before{ content:"● "; color:var(--ink-dim); }

/* ---------- projects ---------- */
.projects-list{ display:flex; flex-direction:column; gap:16px; }
.project-card{ border:1px solid var(--line); }
.project-chrome{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  padding:10px 18px; border-bottom:1px solid var(--line);
  background:var(--bg-raised);
}
.project-body{ padding:22px 22px 24px; }
.project-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; gap:12px;
}
.project-title{ font-family:var(--mono); font-size:16.5px; font-weight:600; color:var(--white); }
.project-status{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-dim);
  border:1px solid var(--line); padding:4px 9px; white-space:nowrap;
}
.project-desc{ color:var(--ink); font-size:15px; line-height:1.7; margin-bottom:16px; max-width:65ch; }
.project-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.project-tags span{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-dim);
  border:1px solid var(--line-soft); padding:4px 10px;
}

/* ---------- contact ---------- */
.contact-terminal{ border:1px solid var(--line); }
.contact-chrome{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  padding:10px 18px; border-bottom:1px solid var(--line);
  background:var(--bg-raised);
}
.contact-body{ padding:26px; }
.contact-body .out{ color:var(--ink-dim); font-size:14.5px; margin-bottom:22px; }
.contact-links{ display:flex; flex-direction:column; }
.contact-links a{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 4px; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:14px;
  transition:padding-left .15s ease, color .15s ease;
}
.contact-links a:last-child{ border-bottom:none; }
.contact-links a .arrow{ color:var(--ink-faint); }
.contact-links a .label{ color:var(--ink-dim); min-width:88px; }
.contact-links a .val{ color:var(--ink); }
.contact-links a:hover{ padding-left:10px; }
.contact-links a:hover .val{ color:var(--white); }
.contact-links a:hover .arrow{ color:var(--white); }

footer{
  max-width:960px; margin:0 auto; padding:32px 24px 64px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-faint);
}
.fcursor{
  display:inline-block; width:6px; height:12px; margin-left:6px;
  background:var(--ink-faint);
  animation: blink 1.1s steps(1) infinite;
  transform:translateY(2px);
}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .hero{ padding:72px 20px 56px; }
  .section{ padding:48px 20px; }
  .hero-stats{ grid-template-columns:1fr; }
  .hero-stat{ border-right:none; border-bottom:1px solid var(--line); }
  .hero-stat:last-child{ border-bottom:none; }
  .skills-grid{ grid-template-columns:1fr; }
  .skill-file{ border-right:none !important; }
  .skill-file:last-child{ border-bottom:none; }
  .about-wrap{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .cursor, .fcursor{ animation:none; opacity:1; }
}