@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  :root{
    --bg: #0A1414;
    --bg-panel: #10201F;
    --bg-panel-2: #142726;
    --line: rgba(237,230,216,0.09);
    --line-strong: rgba(237,230,216,0.18);
    --ink: #EDE6D8;
    --ink-dim: #A9B8B6;
    --ink-mute: #6F8482;
    --amber: #E8A15D;
    --coral: #FF8659;
    --mist: #6FA8AD;
  }

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

  html{ scroll-behavior:smooth; }

  body{
    background: var(--bg);
    color: var(--ink);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--amber); color:#0A1414; }

  h1,h2,h3{ font-family:'Fraunces', serif; font-weight:700; letter-spacing:-0.01em; }

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

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }

  .mono{ font-family:'JetBrains Mono', monospace; }

  /* ---------- background atmosphere ---------- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:2;
    opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .glow-field{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(600px 500px at 82% -8%, rgba(232,161,93,0.10), transparent 60%),
      radial-gradient(500px 400px at -10% 40%, rgba(111,168,173,0.08), transparent 60%);
  }

  /* ---------- horizon signature element ---------- */
  .horizon{
    position:relative;
    height:1px;
    width:100%;
    background:var(--line);
    margin: 0 auto;
    overflow:visible;
  }
  .horizon::before{
    content:'';
    position:absolute;
    top:50%; left:0;
    width:64px; height:64px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, rgba(232,161,93,0.55), rgba(232,161,93,0) 70%);
    animation: drift 14s ease-in-out infinite;
    filter:blur(2px);
  }
  .horizon::after{
    content:'';
    position:absolute;
    top:50%; left:0;
    width:4px; height:4px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 8px 2px rgba(232,161,93,0.9);
    animation: drift 14s ease-in-out infinite;
  }
  @keyframes drift{
    0%{ left:2%; }
    50%{ left:97%; }
    100%{ left:2%; }
  }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:22px 0;
    transition: padding .35s ease, background .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    padding:14px 0;
    background:rgba(10,20,20,0.82);
    backdrop-filter: blur(14px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{ display:flex; align-items:center; justify-content:space-between; }
  .brand{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:0.02em;
  }
  .brand span{ color:var(--amber); }
  .nav-links{
    display:flex; gap:34px; list-style:none;
    font-size:0.86rem; color:var(--ink-dim);
  }
  .nav-links a{ position:relative; transition:color .25s ease; }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:-6px;
    width:0; height:1px; background:var(--amber);
    transition:width .3s ease;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    color:var(--amber);
    border:1px solid rgba(232,161,93,0.35);
    padding:7px 14px;
    border-radius:100px;
    display:flex; align-items:center; gap:7px;
  }
  .nav-cta .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 6px 1px rgba(232,161,93,0.8);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  @media (max-width:760px){
    .nav-links{ display:none; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    padding-top:110px;
    padding-bottom:70px;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap:56px;
    align-items:center;
    position:relative; z-index:1;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--mist);
    display:flex; align-items:center; gap:10px;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:''; width:22px; height:1px; background:var(--mist);
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    line-height:1.02;
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:italic; color:var(--amber); font-weight:600;
  }
  .hero p.lead{
    font-size:1.08rem;
    color:var(--ink-dim);
    max-width:46ch;
    margin-bottom:30px;
  }
  .badge-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }
  .pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 15px;
    border:1px solid var(--line-strong);
    border-radius:100px;
    font-size:0.8rem;
    color:var(--ink-dim);
    background:rgba(237,230,216,0.02);
  }
  .pill .dot{
    width:6px; height:6px; border-radius:50%; background:#7CD9A0;
    box-shadow:0 0 6px 1px rgba(124,217,160,0.8);
  }
  .hero-portrait{
    position:relative;
    margin: 40% auto  auto;
    border-radius:18px;
    overflow:hidden;
    aspect-ratio: 4/5;
    border:1px solid var(--line-strong);
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  }
  .hero-portrait img{
    width:100%; height:100%; object-fit:cover;
    filter: saturate(0.9) contrast(1.05);
  }
  .hero-portrait::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,20,20,0) 55%, rgba(10,20,20,0.55) 100%),
               linear-gradient(20deg, rgba(232,161,93,0.14), transparent 45%);
    pointer-events:none;
  }
  .hero-portrait .cap{
    position:absolute; left:16px; bottom:14px; z-index:2;
    background: transparent;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem; color:var(--ink-dim);
    mix-blend-mode: difference;
    letter-spacing:0.04em;
  }

  @media (max-width:900px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-portrait{ order:-1; max-width:340px; margin:0 auto; }
  }

  /* ---------- section shells ---------- */
  section{ position:relative; padding:50px 0; z-index:1; }
  .section-head{ margin-bottom:56px; max-width:56ch; }
  .section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:12px; }
  .section-head p{ color:var(--ink-dim); margin-top:14px; font-size:1rem; }

  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- about ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.3fr 1fr; gap:60px; align-items:start;
  }
  .about-grid p{ color:var(--ink-dim); margin-bottom:18px; font-size:1.02rem; }
  .about-grid strong{ color:var(--ink); font-weight:600; }

  .fact-card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px;
  }
  .fact-card + .fact-card{ margin-top:16px; }
  .fact-card .k{
    font-family:'JetBrains Mono',monospace; font-size:0.7rem;
    color:var(--mist); letter-spacing:0.08em; text-transform:uppercase;
    margin-bottom:8px; display:block;
  }
  .fact-card .v{ font-size:1.05rem; color:var(--ink); }

  .listening{
    display:flex; gap:14px; align-items:center;
    background:linear-gradient(135deg, rgba(255,134,89,0.08), rgba(111,168,173,0.05));
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
  }
  .listening img{
    width:56px; height:56px; border-radius:10px; object-fit:cover;
    box-shadow:0 8px 20px -6px rgba(0,0,0,0.5);
  }
  .listening .t{ font-size:0.68rem; font-family:'JetBrains Mono',monospace; color:var(--ink-mute); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:4px; }
  .listening .n{ font-size:1rem; font-weight:600; }
  .listening .n span{ color:var(--ink-dim); font-weight:400; font-size:0.86rem; }
  .eq{ display:flex; gap:2px; align-items:flex-end; height:14px; margin-left:auto; }
  .eq i{ width:3px; background:var(--coral); border-radius:2px; animation:eq 1.1s ease-in-out infinite; }
  .eq i:nth-child(1){ animation-delay:0s; height:6px; }
  .eq i:nth-child(2){ animation-delay:.2s; height:14px; }
  .eq i:nth-child(3){ animation-delay:.4s; height:9px; }
  @keyframes eq{ 0%,100%{ transform:scaleY(0.4);} 50%{ transform:scaleY(1);} }

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

  /* ---------- experience ---------- */
  .exp-item{
    display:grid; grid-template-columns: 160px 1fr; gap:34px;
    padding:30px 0; border-top:1px solid var(--line);
  }
  .exp-item:last-child{ border-bottom:1px solid var(--line); }
  .exp-item .when{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--ink-mute); }
  .exp-item h3{ font-size:1.3rem; margin-bottom:10px; }
  .exp-item p{ color:var(--ink-dim); max-width:60ch; margin-bottom:16px; }
  .tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .tag{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem;
    color:#FFD7E595; 
    border:0.1px solid #737373;
    border-bottom-color: #73737350;
    border-right-color: #73737350;
    mix-blend-mode: difference;
    padding:4px 10px; border-radius:100px;
    box-shadow: inset -2px -2px 15px 5px black, inset 2px 4px 15px 2px #B9B9B9;
  }

  /* ---------- projects ---------- */
  .grid-projects{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  }
  @media (max-width:900px){ .grid-projects{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .grid-projects{ grid-template-columns:1fr; } }

  .card{
    position:relative;
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px;
    display:flex; flex-direction:column;
    gap:14px;
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
    overflow:hidden;
  }
  .card::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,161,93,0), transparent);
    transition:background .4s ease;
  }
  .card:hover{
    transform:translateY(-5px);
    border-color:rgba(232,161,93,0.35);
    background:var(--bg-panel-2);
  }
  .card:hover::before{
    background:linear-gradient(90deg, transparent, rgba(232,161,93,0.8), transparent);
  }
  .card-top{ display:flex; align-items:center; justify-content:space-between; }
  .card-icon{
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(237,230,216,0.05);
    border:1px solid var(--line);
    flex-shrink:0;
  }
  .card-icon img{ width:22px; height:22px; object-fit:contain; border-radius:4px; }
  .card-icon svg{ width:18px; height:18px; stroke:var(--amber); }
  .card h3{ font-size:1.15rem; font-weight:600; font-family:'Inter',sans-serif; }
  .card p{ color:var(--ink-dim); font-size:0.92rem; flex-grow:1; }
  .card .go{
    font-family:'JetBrains Mono',monospace; font-size:0.76rem;
    color:var(--mist); display:flex; align-items:center; gap:6px;
  }
  .card .go svg{ width:13px; height:13px; transition:transform .3s ease; }
  .card:hover .go svg{ transform:translate(3px,-3px); }
  .status{
    font-family:'JetBrains Mono',monospace; font-size:0.65rem;
    text-transform:uppercase; letter-spacing:0.06em;
    padding:3px 9px; border-radius:100px;
  }
  .status.live{ color:#7CD9A0; border:1px solid rgba(124,217,160,0.35); }
  .status.wip{
    color: color-mix(in srgb, var(--coral) 50%, color#B9B9B970 50%); 
    border:0.1px solid #737373;
    border-bottom-color: #73737350;
    border-right-color: #73737350;
    mix-blend-mode: difference;
    padding:4px 10px; border-radius:100px;
    box-shadow: inset 1px 2px 10px 6px #2B2B2B, inset 0px 0px 10px 2px #AFAD9C;
  }

  .flame-block{
    grid-column: 1 / -1;
    background:linear-gradient(135deg, rgba(255,134,89,0.05), rgba(111,168,173,0.04));
  }
  .flame-block .sub-projects{
    display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;
  }
  .flame-block .sub-projects span{
    font-family:'JetBrains Mono',monospace; font-size:0.75rem;
    color:var(--ink-dim); border:1px solid var(--line); padding:5px 12px; border-radius:100px;
  }

  /* ---------- stack ---------- */
  .stack-cols{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
  @media (max-width:760px){ .stack-cols{ grid-template-columns:1fr; } }
  .stack-label{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-mute);
    margin-bottom:20px;
  }
  .chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    display:flex; align-items:center; gap:9px;
    padding:9px 14px 9px 9px;
    border:1px solid var(--line);
    border-radius:100px;
    font-size:0.86rem;
    transition:border-color .25s ease, transform .25s ease;
  }
  .chip:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
  .chip .mono-icon{
    width:24px; height:24px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace; font-size:0.62rem; font-weight:600;
    color:#0A1414;
  }
  .chip.learning{ border-style:dashed; color:var(--ink-dim); }
  .chip.learning .mono-icon{ background:transparent; border:1px solid var(--line-strong); color:var(--ink-dim); }

  /* ---------- contact ---------- */
  .contact-box{
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:22px;
    padding:64px 48px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .contact-box h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
  .contact-box p{ color:var(--ink-dim); max-width:44ch; margin:0 auto 34px; }
  .contact-links{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .contact-btn{
    display:flex; align-items:center; gap:10px;
    padding:13px 24px;
    border-radius:100px;
    border:1px solid var(--line-strong);
    font-size:0.92rem;
    transition:all .3s ease;
  }
  .contact-btn svg{ width:17px; height:17px; }
  .contact-btn.primary{
    background:var(--amber); color:#0A1414; border-color:var(--amber); font-weight:600;
  }
  .contact-btn.primary:hover{ background:#f0b477; }
  .contact-btn.ghost:hover{ border-color:var(--ink-dim); }

  footer{
    padding:34px 0 50px;
    text-align:center;
    color:var(--ink-mute);
    font-size:0.78rem;
    font-family:'JetBrains Mono',monospace;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--amber); outline-offset:3px; border-radius:4px;
  }