:root{
  --orange:#f2762e; --orange-soft:#fdf0e6;
  --green:#17a271; --green-soft:#e6f7f0;
  --sky:#39a4dd; --sky-soft:#e7f3fb;
  --bg:#ffffff; --fg:#1c1f26; --muted:#6b7280;
  --border:#e8eaee; --secondary:#f5f6f8;
  --radius:0.625rem;
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text;background:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;font-weight:600}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.text-orange{color:var(--orange)}.text-green{color:var(--green)}.text-sky{color:var(--sky)}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono)}
.mono-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.icon{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon.sm{width:.875rem;height:.875rem}

/* header */
header.site{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);background:rgba(255,255,255,.85);backdrop-filter:blur(12px)}
.navbar{display:flex;height:4rem;align-items:center;justify-content:space-between}
.brand{font-family:var(--font-display);font-size:1rem;font-weight:600}
.nav-links{display:none;align-items:center;gap:1.75rem}
.nav-links a{font-size:.875rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.nav-links a.nav-active,.mobile-nav a.nav-active{color:var(--orange);font-weight:600}
.menu-btn{display:inline-flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius);background:none;cursor:pointer;color:inherit}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--bg);padding:.75rem 1.5rem}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.5rem 0;font-size:.875rem;color:var(--muted)}
@media(min-width:768px){.nav-links{display:flex}.menu-btn{display:none}.mobile-nav,.mobile-nav.open{display:none}}

/* hero */
.hero{position:relative;overflow:hidden}
.blob{position:absolute;border-radius:9999px;filter:blur(64px);pointer-events:none}
.blob.a{top:-8rem;right:-6rem;width:20rem;height:20rem;background:var(--orange-soft)}
.blob.b{top:10rem;left:-6rem;width:18rem;height:18rem;background:var(--sky-soft)}
.blob.c{top:-8rem;right:-6rem;width:20rem;height:20rem;background:var(--green-soft)}
.hero .wrap{position:relative;padding-top:5rem;padding-bottom:5rem}
.hero h1{margin-top:1rem;font-size:2.25rem;line-height:1.08}
.lead{margin-top:1rem;max-width:36rem;font-size:1.125rem;line-height:1.7;color:var(--muted)}
.lead strong{font-weight:500}
@media(min-width:768px){.hero .wrap{padding-top:7rem;padding-bottom:7rem}.hero h1{font-size:3.75rem}}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.chip{border-radius:9999px;padding:.25rem .75rem;font-family:var(--font-mono);font-size:.75rem;font-weight:500}
.chip.orange{background:var(--orange-soft);color:var(--orange)}
.chip.green{background:var(--green-soft);color:var(--green)}
.chip.sky{background:var(--sky-soft);color:var(--sky)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.25rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;border:1px solid transparent;cursor:pointer;transition:opacity .2s,background-color .2s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-ghost{border-color:var(--border)}
.btn-ghost:hover{background:var(--secondary)}

.card{border-radius:calc(var(--radius) + 4px);border:1px solid var(--border);background:var(--bg);transition:box-shadow .25s,transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(28,31,38,.28)}
.p6{padding:1.5rem}.p5{padding:1.25rem}.p8{padding:2rem}
.terminal{margin-top:3.5rem;max-width:36rem;font-family:var(--font-mono);font-size:.875rem}
.terminal .head{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.75rem}
.terminal ul{margin-top:.75rem;display:grid;gap:.375rem}
.terminal li{display:flex;align-items:center;gap:.5rem}

section.block{border-top:1px solid var(--border);padding:5rem 0}
@media(min-width:768px){section.block{padding:7rem 0}}
.sec-head{max-width:42rem;margin-bottom:3rem}
.sec-head h2{margin-top:.75rem;font-size:1.875rem}
.sec-head p{margin-top:.75rem;font-size:1rem;line-height:1.7;color:var(--muted)}
@media(min-width:768px){.sec-head h2{font-size:2.25rem}}

.grid{display:grid;gap:1.5rem}
@media(min-width:640px){.grid.two{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid.three{grid-template-columns:repeat(3,1fr)}.grid.md2{grid-template-columns:repeat(2,1fr)}}
.bar{height:.25rem;width:2.5rem;border-radius:9999px}
.bar.orange{background:var(--orange)}.bar.green{background:var(--green)}.bar.sky{background:var(--sky)}
.small{font-size:.875rem;line-height:1.7;color:var(--muted)}
.tag{border-radius:var(--radius);background:var(--secondary);padding:.25rem .625rem;font-size:.75rem;color:var(--muted)}
.proj{display:flex;flex-direction:column}
.proj h3{margin-top:1rem;font-size:1.125rem}
.link{display:inline-flex;align-items:center;gap:.375rem;margin-top:1.25rem;font-size:.875rem;font-weight:500}

.timeline{border-left:1px solid var(--border);padding-left:1.5rem;position:relative}
.tl-item{position:relative;padding-bottom:2.5rem}
.tl-item:last-child{padding-bottom:0}
.dot{position:absolute;left:-31px;top:.375rem;width:.625rem;height:.625rem;border-radius:9999px}
.tl-item h3{margin-top:.5rem;font-size:1.125rem}

.cert{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.grid.tight{gap:.75rem}
.contact-card{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:640px){.contact-card{flex-direction:row;align-items:center;justify-content:space-between}}
.email{display:inline-flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:500;color:var(--orange)}

footer.site{border-top:1px solid var(--border);padding:2rem 0}
.foot{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;font-size:.75rem;color:var(--muted)}
@media(min-width:640px){.foot{flex-direction:row}}
.social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;order:-1}
@media(min-width:640px){.social-links{order:0}}
.social-link{font-size:.75rem;color:var(--muted);transition:color .15s}
.social-link:hover{color:var(--orange)}

/* publications */
.pub{position:relative;overflow:hidden;border-radius:1rem;border:1px solid var(--border);padding:1.5rem}
.pub:hover{box-shadow:0 10px 30px -18px rgba(28,31,38,.35)}
.pub .top-bar{position:absolute;left:0;right:0;top:0;height:.25rem}
.pub .row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.pill{display:inline-flex;align-items:center;gap:.375rem;border-radius:9999px;padding:.25rem .75rem;font-family:var(--font-mono);font-size:.75rem;font-weight:500}
.pub h2{margin-top:1rem;font-size:1.25rem;line-height:1.35}
.pub-view-btn{background:none;border:0;font:inherit;cursor:pointer;padding:0}

.pdf-modal{position:fixed;inset:0;z-index:100;display:none}
.pdf-modal.open{display:block}
.pdf-modal-backdrop{position:absolute;inset:0;background:rgba(28,31,38,.6);backdrop-filter:blur(2px)}
.pdf-modal-panel{position:relative;z-index:1;margin:2rem auto;width:min(60rem,calc(100% - 2rem));height:calc(100% - 4rem);background:var(--bg);border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px -20px rgba(28,31,38,.5)}
.pdf-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.pdf-modal-title{font-size:1rem;line-height:1.35}
.pdf-modal-close{background:var(--secondary);border:1px solid var(--border);border-radius:999px;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.pdf-modal-close .icon{width:1rem;height:1rem}
.pdf-modal-frame{flex:1;width:100%;border:0;background:var(--secondary)}
@media (max-width:640px){.pdf-modal-panel{margin:0;width:100%;height:100%;border-radius:0}}
