:root{
  --bg1:#f6f7f9; --bg2:#e3e6ec; --ink:#14171c; --muted:#4a5362; --line:rgba(20,23,28,.12);
  --card-a:#ffffff; --card-b:#e8ebf0; --card-line:rgba(255,255,255,.9); --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -12px rgba(30,40,60,.25),0 2px 6px rgba(30,40,60,.08);
  --btn-a:#4b576e; --btn-b:#263042; --btn-ink:#ffffff; --link:#2b3a55; --accent:#33415c;
  --h1-a:#12151a; --h1-b:#5a6475; --chip-a:#fdfdfe; --chip-b:#e6e9ee;
  --r:14px; --r-sm:999px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg1:#12151b; --bg2:#0b0d11; --ink:#eceff4; --muted:#a6afbd; --line:rgba(236,239,244,.12);
    --card-a:#1f242d; --card-b:#14181f; --card-line:rgba(255,255,255,.08); --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px -14px rgba(0,0,0,.7);
    --btn-a:#eef0f4; --btn-b:#a9b1bf; --btn-ink:#10131a; --link:#c9d1df; --accent:#c4ccda;
    --h1-a:#ffffff; --h1-b:#97a2b5; --chip-a:#232933; --chip-b:#171b22;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:1.0625rem/1.6 var(--font);overflow-wrap:break-word;min-height:100vh;
  background:
    radial-gradient(60rem 28rem at 12% -8%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(48rem 26rem at 100% 8%,rgba(190,198,212,.45),transparent 62%),
    linear-gradient(180deg,var(--bg1),var(--bg2)) fixed;
}
@media (prefers-color-scheme:dark){
  body{background:
    radial-gradient(60rem 28rem at 12% -8%,rgba(120,132,155,.22),transparent 60%),
    radial-gradient(48rem 26rem at 100% 8%,rgba(90,100,120,.18),transparent 62%),
    linear-gradient(180deg,var(--bg1),var(--bg2)) fixed;}
}
.wrap{width:100%;max-width:62rem;margin:0 auto;padding:0 1.25rem}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg1);padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}

.top{position:sticky;top:0;z-index:5;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border-bottom:1px solid var(--line)}
@media (prefers-color-scheme:dark){.top{background:linear-gradient(180deg,rgba(24,28,36,.75),rgba(18,21,27,.45))}}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1.5rem;padding-top:.8rem;padding-bottom:.8rem}
.name{font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
nav{display:flex;gap:.25rem;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:.95rem;padding:.4rem .8rem;border-radius:var(--r-sm);transition:background-color 150ms ease,color 150ms ease}
@media (hover:hover) and (pointer:fine){nav a:hover{color:var(--ink);background:rgba(120,130,150,.16)}}

.hero{padding-top:4.5rem;padding-bottom:3rem}
h1{font-size:clamp(2.1rem,6.4vw,3.9rem);line-height:1.06;letter-spacing:-.035em;margin:0 0 1.25rem;max-width:18ch;font-weight:760;
  color:var(--h1-a);background:linear-gradient(180deg,var(--h1-a) 20%,var(--h1-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:clamp(1.1rem,2.4vw,1.3rem);color:var(--muted);max-width:40ch;margin:0 0 1.9rem}
.btn{display:inline-block;color:var(--btn-ink);padding:.8rem 1.5rem;border-radius:var(--r-sm);font-weight:650;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 20px -8px rgba(20,30,50,.5);
  transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 24px -8px rgba(20,30,50,.55)}}
.btn:active{transform:scale(.97)}

section.wrap{padding-top:3.25rem;padding-bottom:1rem}
h2{font-size:clamp(1.5rem,3.5vw,2rem);letter-spacing:-.025em;line-height:1.2;margin:0 0 .75rem}
h3{font-size:1.25rem;line-height:1.25;margin:0 0 .75rem;letter-spacing:-.01em}
.intro{color:var(--muted);max-width:62ch;margin:0 0 1.75rem}

.project{background:linear-gradient(150deg,var(--card-a),var(--card-b));border:1px solid var(--card-line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:1.5rem 1.5rem;margin-bottom:1rem;display:grid;gap:.75rem 2.5rem;
  transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.project:hover{transform:translateY(-2px)}}
.project dl{margin:0;display:grid;gap:1rem}
dt{font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:.1rem}
dd{margin:0;max-width:62ch}
@media (min-width:52rem){.project{grid-template-columns:15rem 1fr}h3{margin:0}}

.chips{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{background:linear-gradient(180deg,var(--chip-a),var(--chip-b));border:1px solid var(--card-line);box-shadow:0 1px 2px rgba(30,40,60,.1);border-radius:var(--r-sm);padding:.4rem .95rem;font-weight:550}

.job{background:linear-gradient(150deg,var(--card-a),var(--card-b));border:1px solid var(--card-line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.4rem 1.5rem}
.job h3{margin-bottom:.25rem}
.meta{color:var(--muted);margin:0 0 .75rem}
.job ul{margin:0;padding-left:1.2rem;max-width:62ch}
.job li{margin-bottom:.35rem}
#cert p{margin:.3rem 0}
.contact{padding-bottom:3rem}
.links{display:flex;flex-direction:column;gap:.5rem;font-size:1.1rem;font-weight:600}
.foot{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.25rem;padding-bottom:2rem;color:var(--muted);font-size:.9rem}
.foot p{margin:0}

/* Load-in: once, short, staggered (first-visit moment, not repeated UI) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero h1,.hero .lede,.hero p:last-child{animation:rise 520ms var(--ease-out) both}
.hero .lede{animation-delay:60ms}
.hero p:last-child{animation-delay:120ms}
@supports (animation-timeline:view()){
  .project,.job{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}