:root{
  --ink:#1e1e1e;
  --muted:#616161;
  --soft:#f7f7f8;
  --key:#0d6efd;
  --ok:#0a7c4a;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}

header, main, footer{position:relative}

/* Minimal, purposeful motion (micro-interactions + scroll reveal) */
.cta, .card{
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08)}
.cta{display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none; color:inherit}
.cta:hover{transform:translateY(-2px); border-color:#cfcfcf; box-shadow:0 10px 22px rgba(0,0,0,.06)}
.cta:focus-visible{outline:3px solid rgba(13,110,253,.35); outline-offset:2px}

/* Reveal-on-scroll only when JS is enabled */
.js .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 600ms ease, transform 600ms ease;
  will-change:opacity, transform;
}
.js .reveal.is-visible{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  .cta, .card{transition:none}
  .js .reveal{transition:none; transform:none; opacity:1}
}

header{padding:56px 24px 24px;background:linear-gradient(180deg,#f5f7ff,transparent)}

.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.header-content{position:relative;z-index:1}
.header-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:10px}
.header-logo{height:40px;width:auto;max-width:220px;object-fit:contain}

@media(min-width:720px){
  .header-top{flex-direction:row;align-items:center;gap:16px}
  .header-logo{height:44px;max-width:260px}
}

h1{font-size:2.2rem;margin:0 0 8px 0}
h2{font-size:1.6rem;margin:32px 0 12px}
h3{font-size:1.1rem;margin:18px 0 6px;color:var(--muted)}

p{margin:10px 0}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hero{font-size:1.05rem;max-width:880px}

.pill{display:inline-block;border:1px solid #ddd;border-radius:999px;padding:6px 12px;margin:4px 6px 0 0;background:#fff}

section{padding:24px 0;border-top:1px solid #eee}
ul{padding-left:18px;margin:8px 0}
li{margin:4px 0}

.grid{display:grid;gap:18px}
@media(min-width:860px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr 1fr}
}

.card{background:var(--soft);padding:16px;border-radius:12px}
.dim{color:var(--muted)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.cta{border:1px solid #ddd;border-radius:10px;padding:10px 14px;background:#fff;font-weight:600}

footer{padding:28px 24px 48px;color:var(--muted)}
.metric{color:var(--ok);font-weight:700}
.note{font-size:.95rem;color:var(--muted)}

.taglist{margin-top:8px}
.tag{display:inline-block;background:#eef6ff;color:#164d99;padding:4px 8px;border-radius:6px;margin:4px 6px 0 0;font-size:.85rem}

.resume-grid{display:grid;gap:18px}
@media(min-width:860px){ .resume-grid{grid-template-columns:1.2fr .8fr} }

.lh-tight li{margin:2px 0}
.block-title{font-weight:700;margin-top:8px}

/* Optional: makes include loading feel less jarring */
[data-include]{min-height:1px}

/* Subtle visual right below header (progressive reveal) */
.working-hero{padding:18px 0 6px; border-top:0}
.working-hero__note{margin-top:10px}

/* Don't reserve space for the working visual until the reveal starts */
.js .working-hero{
  max-height:0;
  overflow:hidden;
  padding:0;
  transition:max-height 700ms ease, padding 700ms ease;
}
.js .working-hero.is-expanded{
  max-height:1400px;
  padding:18px 0 6px;
}

.working-reveal{
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg,#fafbff,#ffffff);
  border:1px solid #eee;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.working-reveal__img{display:block; width:100%; height:auto}

.js .working-reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 900ms ease, transform 900ms ease;
  will-change:opacity, transform;
}
.js .working-reveal.is-visible{opacity:1; transform:none}

.js .working-hero__note{
  opacity:0;
  transform:translateY(6px);
  transition:opacity 700ms ease 120ms, transform 700ms ease 120ms;
}
.js .working-hero.is-expanded .working-hero__note{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  .js .working-hero{max-height:none; padding:18px 0 6px; transition:none}
  .js .working-reveal{opacity:1; transform:none; transition:none}
  .js .working-hero__note{opacity:1; transform:none; transition:none}
}