:root{
  --bg: #0b0c10;
  --bg-card: #111319;
  --text: #e9edf1;
  --muted: #a7b0be;
  --brand: #7aa2ff;
  --border: #1b1f2a;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  --radius: 16px;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #121522, transparent 60%), var(--bg);
  line-height:1.6;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  background:#fff;
  color:#000;
  padding:.5rem 1rem;
  border-radius:6px;
}

.site-header{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:1rem;
  align-items:center;
  padding:1.25rem clamp(1rem,4vw,2rem);
  position:sticky;
  top:0;
  background:rgba(11,12,16,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  z-index:10;
}

.brand h1{
    margin: .2rem 0;
    font-size: 1.25rem;
}

.brand p{
    margin:0;
    color:var(--muted);
    font-size:.95rem;
}

#typing {
  font-size: 2rem;
  font-weight: bold;
  color: #0077ff;
  line-height: 1.5;
  white-space: pre-line; /* allows new lines */
}

/* Fade-in effect for finished lines */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.line {
  border-right: 3px solid #0077ff; /* typing cursor */
  display: inline-block;
  animation: blinkCursor 0.7s step-end infinite;
}

@keyframes blinkCursor {
  0% { border-color: #0077ff; }
  50% { border-color: transparent; }
  100% { border-color: #0077ff; }
}

.site-nav a{
  color:var(--muted);
  text-decoration:none;
  margin:0 .5rem;
  font-size:.95rem;
}

.site-nav a:hover{
    color:var(--text);
}

.btn{
  background: var(--brand); 
  color:#09101a; 
  border:0; 
  padding:.6rem .9rem;
  border-radius:10px; 
  font-weight:600; 
  cursor:pointer; 
  box-shadow: var(--shadow);
}

.btn.secondary{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
    box-shadow:none;
}

main{
    padding:2rem clamp(1rem,4vw,2rem);
    display:grid;
    gap:1.5rem;
    max-width:1100px;
    margin:0 auto;
}

.hero{
  background: linear-gradient(180deg, rgba(122,162,255,.15), transparent 50%);
  border:1px solid var(--border); 
  border-radius: var(--radius); 
  padding:1.5rem;
}

.hero h2{
    margin:.2rem 0 1rem;
}

.metrics{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    padding:0;
    margin:0;
    list-style:none;
}

.metrics li{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:.5rem .75rem;
}

.card{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1.25rem;
  box-shadow: var(--shadow);
}

#projects{
    display:grid;
    gap:1rem;
}

.project{
  display:grid; 
  grid-template-columns:140px 1fr; 
  gap:1rem; 
  align-items:start;
}

.project-img{
  max-width: 5000px;   
  width: 100%;       
  height: auto; 
  border-radius: 10%; 
  display: block;
  margin: 0 auto;
}

.project-header{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:center;
}

.tags{
    display:flex;
    gap:.4rem;
    flex-wrap:wrap;
}
.tags span{
  font-size:.8rem;
  color:var(--muted);
  border:1px solid var(--border);
  padding:.2rem .5rem;
  border-radius:999px;
}

.project-links{
    display:flex;
    gap:.5rem;
    margin:.75rem 0;
}

.impact.compact {
  list-style: none;              
  display: flex;                 
  gap: 1rem;                    
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  background: #f8f9fa;          
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 0.9rem;
  font-family: Arial, sans-serif;
  color: #333;
}

.impact.compact li {
  background: #fff;             
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.impact.compact li strong {
  color: #0070f3;               
}

.log {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 3px solid #ccc; 
  margin-left: 1rem;
}

.log li {
  position: relative;
  margin: 1.5rem 0;
  padding-left: 1rem;
}

.log li::before {
  content: "";
  position: absolute;
  left: -10px; 
  top: 5px;
  width: 12px;
  height: 12px;
  background-color: #4f46e5; /* purple accent */
  border-radius: 50%;
  box-shadow: 0 0 0 2px white; /* outline for contrast */
}

.log time {
  font-size: 0.9rem;
  font-weight: bold;
  color: #555;
  margin-right: 0.5rem;
}

.log li {
  color: #333;
  font-size: 1rem;
}

.tip{
  margin-top: 1rem;
  font-style: italic;
  font-size: 0.9rem;
  color: #666;
}

.site-footer{
  padding:2rem clamp(1rem,4vw,2rem); 
  color:var(--muted); 
  text-align:center;
}

/* Hiring Manager Mode visibility */
.hm-only{
    display:none;
}
body[data-view="hm"] .human-only{
    display:none;
}
body[data-view="hm"] .hm-only{
    display:initial;
}

/* Responsive */
@media (max-width: 760px){
  .site-header{
    grid-template-columns:1fr auto;
}
  .site-nav{
    display:none;
}
  .project{
    grid-template-columns:1fr;
}
}