/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 10 2026 | 09:11:39 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   AXT PORTFOLIO — scoped styles
   Everything below is scoped under .axt-portfolio so it can be
   pasted into WordPress Appearance > Customize > Additional CSS
   WITHOUT affecting the rest of your site (menus, other pages,
   your theme's own headings/footer, etc).

   In your page/post, wrap the HTML content in:
   <div class="axt-portfolio"> ... all the markup ... </div>
   ============================================================ */

.axt-portfolio{
  --bg:#0B0E11;
  --panel:#12171B;
  --panel-alt:#181F24;
  --line:#242C32;
  --copper:#C9834A;
  --copper-dim:#8A5C36;
  --led:#5FC9D6;
  --text:#EDEEEE;
  --text-mute:#8B959C;
  --text-faint:#5A646B;
  --radius:16px;

  display:block;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  background-image:
    radial-gradient(circle at 15% 5%, rgba(201,131,74,0.05), transparent 40%),
    radial-gradient(circle at 85% 40%, rgba(95,201,214,0.04), transparent 40%);
}
.axt-portfolio, .axt-portfolio *{ box-sizing:border-box; }
html{ scroll-behavior:smooth; } /* only global rule left — safe, affects scroll animation only */

.axt-portfolio .page{ max-width:980px; margin:0 auto; padding:0 24px 80px; }

/* ---- sticky nav ---- */
.axt-portfolio .site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  background:rgba(11,14,17,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:16px 24px;
  margin-bottom:8px;
}
.axt-portfolio .site-nav .brand{
  font-family:'JetBrains Mono',monospace; font-size:13px;
  color:var(--text); letter-spacing:0.05em;
  display:flex; align-items:center; gap:8px;
}
.axt-portfolio .site-nav .brand .led{
  width:6px; height:6px; border-radius:50%; background:var(--led);
  box-shadow:0 0 8px var(--led); animation:axt-blink 2.4s ease-in-out infinite;
}
.axt-portfolio .nav-links{ display:flex; gap:22px; font-family:'JetBrains Mono',monospace; font-size:12px; }
.axt-portfolio .nav-links a{ color:var(--text-mute); text-decoration:none; letter-spacing:0.04em; transition:color .2s; }
.axt-portfolio .nav-links a:hover{ color:var(--copper); }
.axt-portfolio .nav-resume{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600;
  background:var(--copper); color:#0B0E11; padding:7px 14px; border-radius:8px;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; transition:background .2s;
}
.axt-portfolio .nav-resume:hover{ background:#DB9660; }
@media(max-width:760px){ .axt-portfolio .nav-links{ display:none; } }
@keyframes axt-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ---- section scaffolding ---- */
.axt-portfolio .section{ padding:56px 0; }
.axt-portfolio .section + .section{ border-top:1px solid var(--line); }
.axt-portfolio .section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:28px; }
.axt-portfolio .section-num{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--copper-dim); }
.axt-portfolio .section-title small{
  display:block; font-family:'JetBrains Mono',monospace; font-weight:400;
  font-size:12px; color:var(--text-faint); margin-top:4px; letter-spacing:0.05em;
}

/* ---- panel (stacked, single-column sections) ---- */
.axt-portfolio .panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px;
}
.axt-portfolio .panel + .panel{ margin-top:16px; }
.axt-portfolio .panel::before, .axt-portfolio .panel::after{
  content:''; position:absolute; top:10px; width:5px; height:5px;
  border-radius:50%; background:#2E363C; box-shadow:0 0 0 1px #060809;
}
.axt-portfolio .panel::before{ left:10px; } .axt-portfolio .panel::after{ right:10px; }
.axt-portfolio .panel .foot-l, .axt-portfolio .panel .foot-r{
  position:absolute; bottom:10px; width:5px; height:5px;
  border-radius:50%; background:#2E363C; box-shadow:0 0 0 1px #060809;
}
.axt-portfolio .panel .foot-l{ left:10px; } .axt-portfolio .panel .foot-r{ right:10px; }

/* ---- heading scale: h1 name -> h2 section -> h3 card/entry title -> h4 micro-label ---- */
.axt-portfolio h1, .axt-portfolio h2, .axt-portfolio h3, .axt-portfolio h4{
  font-family:'Space Grotesk', sans-serif;
  color:var(--text);
  margin:0;
}
.axt-portfolio h1{ font-size:clamp(32px, 4.6vw, 48px); font-weight:700; letter-spacing:-0.01em; }
.axt-portfolio h2{ font-size:26px; font-weight:700; }
.axt-portfolio h3{ font-size:19px; font-weight:600; margin-bottom:4px; }
.axt-portfolio h4{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; font-weight:600; letter-spacing:0.08em;
  color:#E3A468; text-transform:uppercase;
}
.axt-portfolio .sub{ font-size:12.5px; color:var(--text-mute); font-family:'JetBrains Mono',monospace; margin-bottom:14px; }
.axt-portfolio ul.bullets{ margin:0; padding-left:16px; }
.axt-portfolio ul.bullets li{ font-size:13.5px; line-height:1.65; color:var(--text-mute); margin-bottom:6px; }
.axt-portfolio ul.bullets li::marker{ color:var(--copper); }
.axt-portfolio .stack-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.axt-portfolio .chip{
  font-family:'JetBrains Mono',monospace; font-size:11px; padding:5px 10px; border-radius:6px;
  background:var(--panel-alt); border:1px solid var(--line); color:var(--text-mute);
}
.axt-portfolio .chip.hl{ color:var(--led); border-color:rgba(95,201,214,0.3); }

.axt-portfolio .exp-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.axt-portfolio .exp-head .card-title{ margin:0; }
.axt-portfolio .status-badge{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--led);
  border:1px solid rgba(95,201,214,0.35); border-radius:20px;
  padding:3px 10px; display:inline-flex; align-items:center; gap:6px;
}
.axt-portfolio .led-dot{
  width:6px; height:6px; border-radius:50%; background:var(--led);
  box-shadow:0 0 6px var(--led); animation:axt-blink 2.4s ease-in-out infinite;
}

/* ---- hero ---- */
.axt-portfolio .hero{ display:flex; align-items:center; gap:32px; padding-top:48px; }
.axt-portfolio .hero-photo{
  flex-shrink:0; width:132px; height:132px; border-radius:16px;
  border:1px solid var(--line); background:var(--panel-alt);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.axt-portfolio .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.axt-portfolio .hero-photo .initials{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; color:var(--copper); }
.axt-portfolio .hero-text{ min-width:0; }
.axt-portfolio .hero .role{ font-family:'JetBrains Mono',monospace; font-size:16px; color:var(--led); margin-bottom:16px; min-height:22px; }
.axt-portfolio .hero .role .cursor{ display:inline-block; width:8px; height:16px; background:var(--led); vertical-align:middle; margin-left:2px; animation:axt-blink 1s steps(2) infinite; }
.axt-portfolio .hero p.desc{ color:var(--text-mute); max-width:520px; line-height:1.6; font-size:14.5px; margin:0 0 20px; }
.axt-portfolio .hero-links{ display:flex; flex-wrap:wrap; gap:10px; }
.axt-portfolio .hero-links a{
  color:var(--text); text-decoration:none; font-size:13px; font-family:'JetBrains Mono',monospace;
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  border:1px solid var(--line); border-radius:8px; transition:border-color .2s, color .2s;
}
.axt-portfolio .hero-links a:hover{ border-color:var(--copper); color:var(--copper); }
.axt-portfolio .hero-links a svg{ width:13px; height:13px; flex-shrink:0; }
.axt-portfolio .hero-links a.resume-btn{ background:var(--copper); border-color:var(--copper); color:#0B0E11; font-weight:600; }
.axt-portfolio .hero-links a.resume-btn:hover{ background:#DB9660; border-color:#DB9660; color:#0B0E11; }
@media(max-width:640px){ .axt-portfolio .hero{ flex-direction:column; align-items:flex-start; } }

/* ---- bento grid (skills + projects only) ---- */
.axt-portfolio .bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.axt-portfolio .bento .card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
}
.axt-portfolio .bento .card::before, .axt-portfolio .bento .card::after{
  content:''; position:absolute; top:10px; width:5px; height:5px;
  border-radius:50%; background:#2E363C; box-shadow:0 0 0 1px #060809;
}
.axt-portfolio .bento .card::before{ left:10px; } .axt-portfolio .bento .card::after{ right:10px; }
.axt-portfolio .bento .foot-l, .axt-portfolio .bento .foot-r{
  position:absolute; bottom:10px; width:5px; height:5px; border-radius:50%;
  background:#2E363C; box-shadow:0 0 0 1px #060809;
}
.axt-portfolio .bento .foot-l{ left:10px; } .axt-portfolio .bento .foot-r{ right:10px; }
.axt-portfolio .tag{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.08em;
  color:#E3A468; text-transform:uppercase; margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;
}
.axt-portfolio .tag::before{ content:'//'; color:var(--text-faint); }
.axt-portfolio .c2{ grid-column:span 2; } .axt-portfolio .c3{ grid-column:span 3; }
.axt-portfolio .c4{ grid-column:span 4; } .axt-portfolio .c6{ grid-column:span 6; }
.axt-portfolio .r2{ grid-row:span 2; }
.axt-portfolio .dep-line{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;
}
.axt-portfolio .lang-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; }
.axt-portfolio .bar-track{ flex:1; height:5px; background:var(--panel-alt); border-radius:4px; margin:0 12px; overflow:hidden; }
.axt-portfolio .bar-fill{ height:100%; background:var(--copper); border-radius:4px; }

@media(max-width:900px){
  .axt-portfolio .bento .c2, .axt-portfolio .bento .c3, .axt-portfolio .bento .c4{ grid-column:span 3; }
  .axt-portfolio .bento{ grid-template-columns:repeat(6,1fr); }
}
@media(max-width:640px){
  .axt-portfolio .bento .c2, .axt-portfolio .bento .c3, .axt-portfolio .bento .c4, .axt-portfolio .bento .c6{ grid-column:span 6; }
}

.axt-portfolio footer{
  margin-top:20px; padding:24px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-faint);
}