/* =====================================================================
   PORTFOLIO  —  modern developer-mono aesthetic
   ===================================================================== */

:root{
  --bg:          #0a0b0e;
  --bg-2:        #111316;
  --bg-3:        #16181d;
  --bg-card:     #0e1014;
  --border:      #22252c;
  --border-soft: #1a1d23;
  --text:        #e8e9ec;
  --text-2:      #c9ccd2;
  --muted:       #7a7d85;
  --dim:         #4a4d55;
  --accent:      #bbff66;
  --accent-2:    #a4f64a;
  --accent-warm: #ffd966;
  --red:         #ff5f57;
  --green:       #28c840;
  --yellow:      #ffbd2e;

  --mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display:     "Space Grotesk", "JetBrains Mono", system-ui, sans-serif;

  --maxw:        1240px;
  --radius:      10px;
  --radius-sm:   6px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
::selection{background:var(--accent); color:var(--bg)}
code{font-family:var(--mono); background:var(--bg-3); padding:1px 6px; border-radius:4px; font-size:.86em; color:var(--accent)}

/* ---------- ambient background ---------- */
.dotgrid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.6px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 60%, transparent 100%);
}
.orb{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(120px); opacity:.18}
.orb-1{width:560px; height:560px; background:#bbff66; top:-200px; right:-200px}
.orb-2{width:480px; height:480px; background:#5fa8ff; bottom:-180px; left:-180px; opacity:.12}

main{position:relative; z-index:2}

/* ---------- DOTTED TEXT EFFECT ---------- */
.dot-text{
  background-image:radial-gradient(circle, var(--text) 1.4px, transparent 2px);
  background-size:7px 7px;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  display:inline-block;
  line-height:1;
}
.dot-text.accent{
  background-image:radial-gradient(circle, var(--accent) 1.4px, transparent 2px);
}

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 32px;
  background:rgba(10,11,14,.7);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--border-soft);
}
.brand{display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:500; letter-spacing:.5px}
.brand-dot{width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.5; transform:scale(.86)}}
.brand-name{color:var(--text)}
.brand-slash{color:var(--dim)}
.brand-tag{color:var(--muted)}

.navlinks{display:flex; align-items:center; gap:4px}
.navlinks a{
  padding:7px 12px; border-radius:6px; font-size:.85rem; color:var(--muted);
  transition:.16s; letter-spacing:.3px;
}
.navlinks a:hover{color:var(--text); background:var(--bg-3)}
.navlinks .nav-cta{
  margin-left:8px;
  background:var(--accent); color:var(--bg);
  font-weight:500; padding:8px 16px; border-radius:6px;
  display:inline-flex; align-items:center; gap:8px;
}
.navlinks .nav-cta:hover{background:var(--accent-2); color:var(--bg); transform:translateY(-1px)}
.navlinks .nav-cta .arr{transition:transform .2s}
.navlinks .nav-cta:hover .arr{transform:translateX(3px)}

.menu-toggle{display:none; width:40px; height:40px; border:1px solid var(--border);
  border-radius:6px; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--text); border-radius:1px}

/* ---------- HERO ---------- */
.hero{padding:140px 32px 80px; max-width:var(--maxw); margin:0 auto}
.hero-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; margin-bottom:20px}
.hero-left{display:flex; flex-direction:column; gap:20px}

.hi-line{
  font-family:var(--mono); font-size:.95rem; color:var(--muted);
  margin:0; letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:8px;
}
.hi-wave{display:inline-block; animation:wave 2.4s ease-in-out infinite; transform-origin:70% 70%}
@keyframes wave{
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

.status{display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border:1px solid var(--border); border-radius:999px;
  background:rgba(187,255,102,.04); font-size:.78rem; color:var(--muted);
  letter-spacing:.4px; width:max-content}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent); animation:pulse 2s ease-in-out infinite}

.hero-name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(3.5rem, 9vw, 7.5rem);
  line-height:.95; margin:0;
  letter-spacing:-.02em;
}

.hero-role{
  font-family:var(--mono); font-size:1rem;
  color:var(--text-2); margin:0;
  display:flex; align-items:center; gap:10px;
}
.cursor-tag{color:var(--accent); font-weight:700}
.caret{display:inline-block; width:10px; color:var(--accent); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.hero-tagline{
  font-family:var(--mono); font-size:.95rem; line-height:1.75;
  color:var(--muted); margin:0; max-width:54ch;
}

.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:4px}

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:7px;
  font-family:var(--mono); font-size:.88rem; font-weight:500;
  letter-spacing:.3px; transition:.2s;
  cursor:pointer;
}
.btn-primary{background:var(--accent); color:var(--bg)}
.btn-primary:hover{background:var(--accent-2); transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(187,255,102,.2)}
.btn-primary .arr{transition:transform .2s}
.btn-primary:hover .arr{transform:translateX(4px)}
.btn-ghost{border:1px solid var(--border); color:var(--text-2); background:var(--bg-card)}
.btn-ghost:hover{border-color:var(--text-2); color:var(--text); background:var(--bg-3)}
.dot.dot-pulse{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent); animation:pulse 2s ease-in-out infinite}

.hero-meta-row{
  display:grid; grid-template-columns:repeat(3, auto);
  gap:32px; margin-top:18px; padding-top:24px;
  border-top:1px dashed var(--border);
  width:max-content; max-width:100%;
}
.meta-cell{display:flex; flex-direction:column; gap:4px}
.meta-label{font-size:.7rem; color:var(--dim); letter-spacing:.5px}
.meta-val{font-size:.82rem; color:var(--text-2)}

/* ---------- HERO PHOTO ---------- */
.hero-right{display:flex; justify-content:center; align-items:center}
.hero-photo-wrap{
  position:relative;
  width:100%; max-width:440px;
  aspect-ratio:1/1.2;
  display:flex; align-items:flex-end; justify-content:center;
}
.photo-bg-glow{
  position:absolute; inset:8% 4% 4% 4%; z-index:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(187,255,102,.28), transparent 60%);
  filter:blur(50px);
}
.photo-bg-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(187,255,102,.18) 1px, transparent 1.6px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(circle at 50% 55%, #000 28%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 55%, #000 28%, transparent 62%);
}
.photo-bg-ring{
  position:absolute; inset:6% 8% 6% 8%; z-index:1;
  border:1px dashed rgba(187,255,102,.35);
  border-radius:50%;
  animation:slow-spin 60s linear infinite;
}
.photo-bg-ring-2{
  inset:14% 16% 14% 16%;
  border-color:rgba(187,255,102,.15);
  animation:slow-spin 90s linear infinite reverse;
}
@keyframes slow-spin{to{transform:rotate(360deg)}}
.hero-photo{
  position:relative; z-index:2;
  width:auto; height:100%; max-height:520px;
  object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))
         drop-shadow(0 0 28px rgba(187,255,102,.08));
  animation:float-y 6s ease-in-out infinite;
}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.float-chip{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(14,16,20,.92);
  border:1px solid var(--border);
  border-radius:999px;
  font-family:var(--mono); font-size:.74rem; color:var(--text-2);
  white-space:nowrap;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  animation:float-y 5.5s ease-in-out infinite;
}
.float-chip strong{color:var(--accent); font-weight:600}
.chip-top{top:6%; right:-6%; animation-delay:0s}
.chip-side{top:42%; left:-10%; animation-delay:-1.8s}
.chip-bottom{bottom:14%; right:-10%; animation-delay:-3.5s}
.chip-pin{font-size:.78rem}
.chip-arrow{color:var(--accent); font-weight:700}

.photo-label{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  z-index:3;
  display:flex; gap:10px; align-items:center;
  padding:6px 12px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:6px;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.4px; white-space:nowrap;
}
.photo-label .pl-key{color:var(--accent)}
.photo-label .pl-val{color:var(--muted)}

/* unused term-card kept for backwards compatibility */
.term-card{display:none}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; background:var(--bg-2);
  border-bottom:1px solid var(--border);
  position:relative;
}
.term-dot{width:12px; height:12px; border-radius:50%}
.term-dot.red{background:var(--red)}
.term-dot.yellow{background:var(--yellow)}
.term-dot.green{background:var(--green)}
.term-title{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:.72rem; color:var(--muted); letter-spacing:.4px;
}
.term-tabs{margin-left:auto; display:flex; gap:6px; align-items:center}
.term-tabs .tab{font-size:.7rem; color:var(--muted);
  padding:3px 10px; border-radius:4px; background:var(--bg-3);
  border:1px solid var(--border);}
.term-tabs .tab.active{color:var(--accent); border-color:rgba(187,255,102,.3)}

.term-card-body{
  padding:18px 18px 22px;
  min-height:240px;
  font-family:var(--mono); font-size:.85rem; line-height:1.75;
}
.term-card-body .ln{display:block}
.term-card-body .c-prompt{color:var(--accent); font-weight:700}
.term-card-body .c-cmd{color:var(--text)}
.term-card-body .c-out{color:var(--muted)}
.term-card-body .c-key{color:var(--accent-warm)}
.term-card-body .c-val{color:var(--text-2)}
.term-card-body .c-com{color:var(--dim); font-style:italic}

/* hero stats */
.hero-stats{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); overflow:hidden; margin-top:20px;
}
.stat{padding:24px 22px; border-right:1px solid var(--border-soft); position:relative}
.stat:last-child{border-right:none}
.stat::before{
  content:""; position:absolute; top:14px; right:14px;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
.stat-num{font-family:var(--display); font-size:2.2rem; font-weight:700;
  color:var(--text); line-height:1; margin-bottom:6px; letter-spacing:-.02em}
.stat-label{font-size:.78rem; color:var(--muted); letter-spacing:.4px}

/* ---------- SECTION ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:80px 32px 40px}
.section-head{display:flex; align-items:center; gap:18px; margin-bottom:42px}
.section-num{font-family:var(--mono); font-size:.85rem; color:var(--accent);
  font-weight:700; letter-spacing:1px}
.section-title{
  font-family:var(--display); font-size:clamp(1.6rem, 3.8vw, 2.4rem);
  font-weight:700; margin:0; color:var(--text); letter-spacing:-.01em;
  display:inline-flex; align-items:baseline; gap:2px;
}
.section-title .blink{color:var(--accent); animation:blink 1.1s steps(2) infinite}
.section-rule{flex:1; height:1px;
  background:linear-gradient(90deg, var(--border) 0%, transparent 95%)}
.section-meta{font-size:.8rem; color:var(--muted)}
.section-meta:hover{color:var(--accent)}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.seen{opacity:1; transform:none}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:48px}
.about-text p{font-size:1rem; line-height:1.8; margin:0 0 18px; color:var(--text-2)}
.about-line{color:var(--muted)}
.about-text .hl{color:var(--text); font-weight:500;
  background:linear-gradient(180deg, transparent 70%, rgba(187,255,102,.18) 70%);
  padding:0 3px}
.about-side{display:flex; flex-direction:column; gap:24px}

.polaroid{
  position:relative;
  background:#f3e6c3;
  padding:14px 14px 50px;
  border-radius:3px;
  transform:rotate(-2.2deg);
  box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  transition:transform .4s ease;
  align-self:center;
  max-width:260px;
}
.polaroid:hover{transform:rotate(0); box-shadow:0 22px 60px rgba(0,0,0,.7)}
.polaroid-img{
  width:100%; aspect-ratio:1/1.1;
  background:#1a1d23;
  border-radius:2px;
  overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  position:relative;
}
.polaroid-img::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(187,255,102,.12), transparent 65%);
}
.polaroid-img img{
  width:auto; height:96%; max-width:none;
  object-fit:contain;
  filter:grayscale(.15) contrast(1.04);
  position:relative; z-index:1;
}
.polaroid-cap{
  margin-top:14px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.7rem;
}
.polaroid-cap .pc-name{color:#1a0e07; font-weight:600}
.polaroid-cap .pc-meta{color:#7a5e0e}
.polaroid-tape{
  position:absolute;
  width:60px; height:18px;
  background:rgba(187,255,102,.4);
  border:1px solid rgba(187,255,102,.5);
  backdrop-filter:blur(2px);
}
.polaroid-tape.tape-tl{top:-8px; left:-12px; transform:rotate(-22deg)}
.polaroid-tape.tape-br{bottom:38px; right:-14px; transform:rotate(28deg)}
.side-block{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); padding:20px 22px;
}
.side-label{font-family:var(--mono); font-size:.72rem; color:var(--accent);
  letter-spacing:.5px; margin-bottom:14px}
.side-list{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:8px}
.side-list li{font-size:.88rem; color:var(--text-2); padding-left:18px;
  position:relative}
.side-list li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px rgba(187,255,102,.6);
}

/* ---------- WORK / PROJECTS ---------- */
.projects{display:grid; gap:24px; grid-template-columns:1fr}
.project{
  display:grid; grid-template-columns:380px 1fr; gap:32px;
  background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; transition:.3s;
  position:relative; overflow:hidden;
}
.project::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:0; transition:.3s;
}
.project:hover{border-color:var(--text-2); transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.project:hover::before{opacity:1}

.project-thumb{
  border-radius:var(--radius-sm); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--border-soft);
  aspect-ratio:4/3;
}
.project-thumb img{width:100%; height:100%; object-fit:cover}

.project-body{display:flex; flex-direction:column; gap:14px}
.project-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.project-name{font-family:var(--display); font-size:1.5rem; font-weight:700;
  margin:0; color:var(--text); letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:10px}
.project-name .live-badge{
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  padding:3px 8px; border-radius:4px; letter-spacing:.6px;
  background:rgba(40,200,64,.12); color:var(--green);
  border:1px solid rgba(40,200,64,.3); text-transform:uppercase;
}
.project-meta-row{display:flex; gap:14px; font-size:.78rem; color:var(--muted);
  align-items:center}
.project-meta-row .dot-sep{width:3px; height:3px; border-radius:50%; background:var(--dim)}
.project-type{font-size:.85rem; color:var(--accent)}
.project-desc{font-size:.92rem; color:var(--text-2); line-height:1.75; margin:0}
.project-stack{display:flex; flex-wrap:wrap; gap:6px}
.project-stack span{font-family:var(--mono); font-size:.72rem; color:var(--muted);
  border:1px solid var(--border); padding:4px 10px; border-radius:4px;
  background:var(--bg-2)}
.project-link{
  font-family:var(--mono); font-size:.82rem; color:var(--accent);
  border-bottom:1px dashed var(--accent); padding-bottom:2px;
  width:max-content; transition:.2s;
}
.project-link:hover{color:var(--accent-2); border-color:var(--accent-2)}

/* ---------- EXPERIENCE ---------- */
.experience{display:flex; flex-direction:column; gap:14px}
.exp{
  display:grid;
  grid-template-columns:84px 1fr auto auto;
  align-items:center; gap:24px;
  padding:22px 26px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card);
  transition:.25s;
  text-decoration:none; color:inherit;
}
.exp:hover{border-color:var(--accent); background:rgba(187,255,102,.03);
  transform:translateX(4px)}
.exp-logo{
  width:72px; height:72px;
  background:var(--bg-2);
  border:1px solid var(--border-soft);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  overflow:hidden;
}
.exp-logo img{max-width:100%; max-height:100%; object-fit:contain}
.exp-info{display:flex; flex-direction:column; gap:4px; min-width:0}
.exp-company{font-family:var(--display); font-size:1.35rem; font-weight:700;
  color:var(--text); letter-spacing:-.01em; line-height:1.15}
.exp-role{font-size:.84rem; color:var(--muted); font-family:var(--mono)}
.exp-meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  font-family:var(--mono); white-space:nowrap}
.exp-period{font-size:.85rem; color:var(--accent); font-weight:600; letter-spacing:.3px}
.exp-loc{font-size:.76rem; color:var(--muted)}
.exp-arr{
  font-family:var(--mono); color:var(--muted); font-size:1rem;
  transition:.25s; opacity:0;
}
.exp:hover .exp-arr{opacity:1; color:var(--accent); transform:translate(3px,-3px)}

/* ---------- SKILLS ---------- */
.skills{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;
  margin-bottom:42px}
.skill-rack{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); padding:22px;
}
.skill-rack h4{
  font-family:var(--mono); font-size:.75rem; color:var(--accent);
  margin:0 0 16px; letter-spacing:1px; text-transform:lowercase;
}
.skill-rack h4::before{content:"// "; color:var(--dim)}
.skill-chips{display:flex; flex-wrap:wrap; gap:8px}
.skill-chips span{
  font-family:var(--mono); font-size:.78rem; color:var(--text-2);
  padding:5px 11px; border-radius:6px;
  background:var(--bg-2); border:1px solid var(--border-soft);
  transition:.2s;
}
.skill-chips span:hover{color:var(--accent); border-color:var(--accent);
  transform:translateY(-2px)}

.marquee{
  position:relative; overflow:hidden;
  border-top:1px dashed var(--border); border-bottom:1px dashed var(--border);
  padding:18px 0; margin-top:36px;
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display:flex; gap:48px; width:max-content;
  animation:scroll 30s linear infinite;
}
.marquee-track span{
  font-family:var(--mono); font-size:1.2rem; color:var(--dim);
  display:inline-flex; align-items:center; gap:48px;
  white-space:nowrap;
}
.marquee-track span::after{content:"●"; color:var(--accent); font-size:.6rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- TERMINAL (interactive) ---------- */
.terminal-wrap{max-width:920px; margin:0 auto}
.terminal{
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(187,255,102,.04);
}
.terminal .term-bar{padding:12px 16px}
.term-body{
  padding:18px 20px 8px;
  min-height:340px; max-height:480px; overflow-y:auto;
  font-family:var(--mono); font-size:.9rem; line-height:1.75;
  color:var(--text-2);
}
.term-body::-webkit-scrollbar{width:6px}
.term-body::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px}

.term-line{margin:2px 0; white-space:pre-wrap; word-break:break-word}
.term-line.cmd{color:var(--text)}
.term-line.err{color:var(--red)}
.term-line.ok{color:var(--accent)}
.term-line.dim{color:var(--muted)}
.term-line .lk{color:var(--accent-warm); text-decoration:underline; cursor:pointer}
.term-line .lk:hover{color:var(--accent)}

.term-input-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 20px; border-top:1px solid var(--border);
  background:var(--bg-2);
}
.term-prompt{
  font-family:var(--mono); font-size:.88rem;
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
}
.term-prompt .p-user{color:var(--accent); font-weight:700}
.term-prompt .p-at{color:var(--dim)}
.term-prompt .p-host{color:var(--accent-warm)}
.term-prompt .p-path{color:var(--text-2); margin-left:6px}
.term-prompt .p-arrow{color:var(--accent); font-weight:700; margin-left:4px}
.term-input{
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-family:var(--mono); font-size:.92rem;
  caret-color:var(--accent);
}
.term-input::placeholder{color:var(--dim)}

/* ---------- CONTACT ---------- */
.contact-card{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); padding:48px 44px;
  position:relative; overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; top:-100px; right:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(187,255,102,.12), transparent 65%);
}
.contact-eyebrow{font-family:var(--mono); font-size:.78rem; color:var(--accent);
  letter-spacing:1px; margin:0 0 16px}
.contact-headline{
  font-family:var(--display); font-size:clamp(2rem, 4.5vw, 3.4rem);
  font-weight:700; margin:0 0 22px; line-height:1;
  letter-spacing:-.02em;
}
.contact-text{font-size:.95rem; color:var(--muted); line-height:1.75; margin:0; max-width:42ch}

.contact-right{display:flex; flex-direction:column; gap:12px}
.contact-link{
  display:grid; grid-template-columns:90px 1fr auto;
  align-items:center; gap:18px;
  padding:18px 22px; border-radius:8px;
  background:var(--bg-2); border:1px solid var(--border);
  transition:.2s; font-family:var(--mono); cursor:pointer;
}
.contact-link:hover{border-color:var(--accent); background:rgba(187,255,102,.04);
  transform:translateX(4px)}
.contact-link .cl-label{font-size:.74rem; color:var(--muted); letter-spacing:.5px}
.contact-link .cl-value{font-size:.92rem; color:var(--text); font-weight:500}
.contact-link .arr{color:var(--accent); font-size:1.05rem; transition:transform .2s}
.contact-link:hover .arr{transform:translate(3px,-3px)}
.contact-link.primary{background:rgba(187,255,102,.06); border-color:rgba(187,255,102,.25)}

/* ---------- ACTIVE NAV ---------- */
.navlinks a.is-active{color:var(--accent); background:rgba(187,255,102,.06)}

/* ---------- SUB PAGE HERO ---------- */
.page-sub main{padding-bottom:0}
.sub-hero{
  max-width:var(--maxw); margin:0 auto;
  padding:130px 32px 30px;
}
.sub-hero-grid{
  display:grid; grid-template-columns:1fr auto;
  gap:36px; align-items:flex-end;
  padding-bottom:30px; border-bottom:1px dashed var(--border);
}
.sub-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.8rem, 8vw, 6rem);
  line-height:.95; margin:6px 0 14px;
  letter-spacing:-.02em;
}
.sub-tagline{font-family:var(--mono); font-size:.95rem; line-height:1.7;
  color:var(--muted); margin:0; max-width:60ch}
.sub-meta{display:flex; gap:24px; align-items:flex-end;
  padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card)}
.section-sub{padding-top:40px}

.add-note{
  margin-top:48px; padding:18px 22px;
  border:1px dashed var(--border); border-radius:var(--radius);
  background:rgba(187,255,102,.03);
  font-family:var(--mono); font-size:.85rem; color:var(--muted);
}
.add-note .ok{color:var(--accent); font-weight:700; margin-right:6px}
.add-note code{background:var(--bg-2); color:var(--accent); padding:1px 8px}

/* ---------- GALLERY GRID ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:160px;
  gap:14px;
}
.g-item{
  position:relative; margin:0;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-card);
  cursor:zoom-in;
  transition:.3s;
}
.g-item:hover{transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.g-item img{width:100%; height:100%; object-fit:cover; transition:.4s}
.g-item:hover img{transform:scale(1.04)}
.g-square{grid-column:span 2; grid-row:span 2}
.g-wide  {grid-column:span 3; grid-row:span 2}
.g-tall  {grid-column:span 2; grid-row:span 3}
.g-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 16px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.92));
  display:flex; flex-direction:column; gap:3px;
  opacity:0; transform:translateY(8px); transition:.3s;
}
.g-item:hover .g-cap{opacity:1; transform:translateY(0)}
.g-cap-main{font-family:var(--mono); font-size:.82rem; color:var(--text); font-weight:500}
.g-cap-meta{font-family:var(--mono); font-size:.7rem; color:var(--accent); letter-spacing:.5px}

/* lightbox (gallery page) */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,5,8,.96); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center;
  padding:30px;
}
.lightbox.open{display:flex}
.lb-img{
  max-width:88vw; max-height:80vh;
  border-radius:6px; border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.lb-cap{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; gap:14px; align-items:center;
  font-family:var(--mono); font-size:.85rem;
  padding:10px 18px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:999px;
}
.lb-cap-main{color:var(--text)}
.lb-cap-meta{color:var(--accent)}
.lb-close, .lb-nav{
  position:absolute; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  font-size:1.6rem; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center;
}
.lb-close{top:24px; right:24px; line-height:1}
.lb-close:hover{background:var(--red); color:#fff; border-color:var(--red)}
.lb-prev{left:24px; top:50%; transform:translateY(-50%); line-height:1}
.lb-next{right:24px; top:50%; transform:translateY(-50%); line-height:1}
.lb-nav:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- BLOG LIST ---------- */
.blog-list{display:flex; flex-direction:column; gap:18px}
.post{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); overflow:hidden;
  transition:.25s;
}
.post:hover{border-color:var(--text-2)}
.post.open{border-color:var(--accent)}
.post-head{
  display:grid; grid-template-columns:200px 1fr;
  gap:28px; padding:24px; align-items:center;
  cursor:pointer;
}
.post-cover{
  width:200px; height:130px; border-radius:var(--radius-sm);
  overflow:hidden; background:var(--bg-2);
  border:1px solid var(--border-soft);
}
.post-cover img{width:100%; height:100%; object-fit:cover}
.post-info{display:flex; flex-direction:column; gap:8px; min-width:0}
.post-meta-row{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; color:var(--muted);
  letter-spacing:.4px;
}
.post-tag{color:var(--accent)}
.post-read{color:var(--dim)}
.post-title{font-family:var(--display); font-size:1.35rem; font-weight:700;
  margin:0; color:var(--text); letter-spacing:-.01em; line-height:1.3}
.post-excerpt{font-size:.93rem; line-height:1.7; color:var(--text-2); margin:0}
.post-toggle{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  color:var(--accent); padding:6px 0; margin-top:4px;
  width:max-content; transition:.2s; background:none; border:none; cursor:pointer;
}
.post-toggle:hover{transform:translateX(4px)}

.post-body{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s ease, opacity .35s ease;
}
.post.open .post-body{max-height:4000px; opacity:1}
.post-content{
  padding:8px 36px 24px 36px;
  border-top:1px dashed var(--border); margin-top:8px;
}
.post-content h3{
  font-family:var(--display); font-size:1.05rem;
  color:var(--accent); margin:24px 0 10px; letter-spacing:.3px;
}
.post-content p{
  font-size:.94rem; line-height:1.85;
  color:var(--text-2); margin:0 0 14px;
  font-family:var(--mono);
}
.post-content ul{
  margin:8px 0 14px; padding-left:0; list-style:none;
}
.post-content li{
  position:relative; padding-left:22px; margin:6px 0;
  font-size:.92rem; color:var(--text-2); line-height:1.7;
  font-family:var(--mono);
}
.post-content li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.post-content em{color:var(--accent-warm); font-style:italic}
.post-foot{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 36px 26px;
  font-family:var(--mono); font-size:.78rem;
}
.post-back, .post-share{color:var(--muted); cursor:pointer}
.post-back:hover, .post-share:hover{color:var(--accent)}

/* ---------- FOOTER ---------- */
.footer{
  max-width:var(--maxw); margin:80px auto 0; padding:30px 32px 50px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px dashed var(--border);
  font-family:var(--mono); font-size:.82rem; color:var(--muted);
}
.footer-left{display:flex; align-items:center; gap:10px}
.footer-meta{color:var(--dim)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero-right{order:-1}
  .hero-photo-wrap{max-width:340px; aspect-ratio:1/1.15}
  .hero-photo{max-height:420px}
  .chip-top{right:-2%}
  .chip-side{left:-4%}
  .chip-bottom{right:-4%}
  .about-grid{grid-template-columns:1fr; gap:32px}
  .polaroid{align-self:flex-start; max-width:240px}
  .gallery-grid{grid-template-columns:repeat(4, 1fr); grid-auto-rows:140px}
  .g-tall{grid-row:span 2}
  .sub-hero-grid{grid-template-columns:1fr; gap:24px; align-items:flex-start}
  .project{grid-template-columns:1fr}
  .project-thumb{max-width:380px}
  .contact-card{grid-template-columns:1fr; padding:36px 30px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border-soft)}
  .navlinks{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; padding:14px 24px;
    background:rgba(10,11,14,.96); border-top:1px solid var(--border-soft); gap:4px}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 14px}
  .navlinks .nav-cta{margin:8px 0 0; justify-content:center}
  .menu-toggle{display:flex}
  .topbar{padding:14px 22px}
}
@media(max-width:560px){
  body{font-size:14px}
  .hero{padding:120px 20px 60px}
  .section{padding:60px 20px 30px}
  .hero-meta-row{grid-template-columns:1fr; gap:14px}
  .hero-photo-wrap{max-width:280px}
  .hero-photo{max-height:360px}
  .float-chip{font-size:.66rem; padding:6px 10px}
  .chip-top{right:0}
  .chip-side{left:-2%}
  .chip-bottom{right:-2%}
  .photo-label{font-size:.62rem; padding:5px 9px}
  .polaroid{max-width:220px; align-self:center}
  .skills{grid-template-columns:1fr}
  .hero-cta{flex-direction:column; width:100%}
  .btn-primary, .btn-ghost{justify-content:center; width:100%}
  .contact-card{padding:28px 22px}
  .contact-link{grid-template-columns:1fr auto; gap:6px}
  .contact-link .cl-label{grid-column:1/-1}
  .exp{grid-template-columns:56px 1fr; gap:16px; padding:18px}
  .exp-logo{width:56px; height:56px; padding:10px; border-radius:10px}
  .exp-meta{grid-column:1 / -1; align-items:flex-start; flex-direction:row;
    gap:12px; padding-top:8px; border-top:1px dashed var(--border-soft); margin-top:4px}
  .exp-company{font-size:1.1rem}
  .exp-arr{display:none}

  .sub-hero{padding:120px 20px 24px}
  .sub-hero-grid{grid-template-columns:1fr; gap:18px}
  .sub-meta{align-self:flex-start}

  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:140px; gap:10px}
  .g-square, .g-wide, .g-tall{grid-column:span 1; grid-row:span 2}
  .g-cap{opacity:1; transform:none}

  .post-head{grid-template-columns:1fr; gap:16px; padding:18px}
  .post-cover{width:100%; height:180px}
  .post-content{padding:8px 18px 18px}
  .post-foot{padding:14px 18px 22px}

  .lb-close{top:14px; right:14px; width:38px; height:38px; font-size:1.3rem}
  .lb-prev, .lb-next{width:38px; height:38px; font-size:1.4rem}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-cap{bottom:16px; font-size:.75rem; padding:8px 14px; flex-direction:column; gap:2px; align-items:center; text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}