:root{
  --white:#FFFFFF; --black:#000000; --muted:#888888; --track:#EEEEEE;
  --blue:#0B61FF; --blue-hov:#0048D6; --blue-deep:#083F9E;
  --barGreen:#0B61FF;            /* hero vertical bar ONLY */

  --wrap:1180px;
  --space-24:24px; --space-32:32px; --space-56:56px; --space-80:80px;

  /* Hero sizing + tuning */
  --heroSize: clamp(7rem, 20vw, 22rem);
  --hiLine: .83;        /* line-height used for "HI!" */
  --barStretch: 1.20;   /* 20% taller than HI!'s line box */
  --barLift: -0.08em;   /* nudge up to visually center vs the "!" dot */
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--white);color:var(--black)}
body{font:16px/1.6 "Playfair Display", ui-serif, Georgia, serif}
a{color:inherit;text-decoration:none}
a:focus{outline:2px solid var(--blue-deep);outline-offset:3px}
.mono{font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
.serif{font-family:"Playfair Display", ui-serif, Georgia, serif}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(24px, 6vw, 80px)}
hr.rule{border:0;border-top:1px solid #eee;margin:32px 0}

/* Header */
.top{background:var(--white);position:sticky;top:0;z-index:20}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;padding-block:20px}
.brand .name{font-family:"Playfair Display";font-weight:600;font-size:20px}
.brand .tag{display:block;margin-top:4px;color:var(--muted);font-family:"Space Mono";letter-spacing:.05em;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(48vw,440px)}
.nav a{font-family:"Space Mono";letter-spacing:.05em;color:var(--muted);margin-left:22px;font-size:14px;transition:color 160ms ease}
.nav a:hover,.nav a:focus{color:var(--black)}

/* Hero */
.hero-hello{padding-top:var(--space-80);padding-bottom:var(--space-56)}

/* Give the hero row the font-size so 1em == HI! size for precise bar math */
.hello{
  display:flex;align-items:center;gap:clamp(16px,3vw,28px);
  font-size:var(--heroSize);
}

.hi{
  font-family:"Bebas Neue","League Spartan","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:1em;                 /* inherits --heroSize from .hello */
  line-height:var(--hiLine);
  letter-spacing:-.01em;
  display:inline-block;
}

.bar{
  width:4px;                     /* thin line */
  height:calc(1em * var(--hiLine) * var(--barStretch)); /* 20% taller than HI! */
  background:var(--barGreen);
  transform-origin:top center;
  transform:translateY(var(--barLift)) scaleY(1);       /* keep the lift */
}

@media (prefers-reduced-motion:no-preference){
  .bar{
    transform:translateY(var(--barLift)) scaleY(0);
    animation:barGrow .5s 120ms forwards cubic-bezier(.4,0,.2,1);
  }
}
@keyframes barGrow{
  to{ transform:translateY(var(--barLift)) scaleY(1); }
}

/* Greeting under HI */
.intro{
  margin-top:40px;
  font-size:clamp(1.6rem, 1.4vw + 1.2rem, 2.1rem);
}
.intro .intro-black{color:var(--black);font-weight:600}
.intro .intro-blue{color:var(--blue);font-weight:600}

/* CTA */
.hero-cta{margin-top:32px}
.btn-cta{
  display:inline-block;border:1.5px solid var(--blue);padding:12px 18px;text-transform:uppercase;
  font-family:"Space Mono";letter-spacing:.18em;font-size:.75rem;
  transition:background-color 160ms ease,color 160ms ease;
}
.btn-cta:hover,.btn-cta:focus{background:var(--blue);color:#fff;outline:2px solid var(--blue-deep);outline-offset:3px}

/* Sections */
.content{padding-bottom:80px}
.section{margin-top:var(--space-80)}
.section h2{font-family:"Playfair Display";font-weight:600;font-size:clamp(1.75rem,1.2rem + 1.2vw,2rem);margin:0 0 24px}

/* Experience */
.role-title{font-weight:600;font-size:1.15rem;margin:0 0 6px}
.meta{color:var(--muted);font-family:"Space Mono";font-size:.85rem;margin-bottom:8px}
.bullets{margin:0 0 0 18px;padding:0}.bullets li{margin:6px 0}

/* Skills – thin bars */
.skills{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.skill .skill-row{display:flex;justify-content:space-between;align-items:baseline}
.skill .skill-name{font-weight:600}
.skill .skill-level{color:var(--muted);font-size:.85rem}
.skill-track{height:4px;background:var(--track);overflow:hidden;margin-top:6px}
.skill-track span{display:block;height:100%;width:0;background:#0B61FF;transition:width 480ms cubic-bezier(.4,0,.2,1)}
.skill-meta{color:var(--muted);font-size:.8rem;margin-top:4px}

/* Certifications */
.certs{column-count:1;column-gap:40px}
@media (min-width:880px){.certs{column-count:2}}
.cert{break-inside:avoid;margin:0 0 18px}
.cert-meta{color:var(--muted);font-size:.85rem}

/* Footer */
.foot{padding:56px 0 80px;color:var(--muted)}