:root{
  --bg:#FFFFFF;
  --surface:#F6F5F1;
  --surface-2:#F0EEE7;
  --border:#E3E1D8;
  --text:#15171C;
  /* darkened from #686C74 so muted text clears WCAG AA on the tinted surfaces too */
  --text-muted:#5A5E65;
  --accent:#0f356b;
  --accent-deep:#0a144a;
  --accent-soft:#E3F1EC;

  --sans:'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:'Space Grotesk', var(--sans), sans-serif;

  --shadow-1:0 1px 2px rgba(20,20,15,.05);
  --shadow-2:0 2px 6px rgba(20,20,15,.06), 0 12px 28px -18px rgba(15,107,82,.35);
  --shadow-3:0 6px 14px rgba(20,20,15,.07), 0 26px 60px -30px rgba(15,107,82,.45);
  --ease:cubic-bezier(.22,.7,.3,1);

  --header-h:74px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:
    radial-gradient(60rem 40rem at 110% -10%, #EAF4F0 0%, transparent 60%),
    radial-gradient(45rem 35rem at -10% 5%, #F7F5EF 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--accent); color:#fff; padding:.6rem .9rem;
  border-radius:8px; text-decoration:none; font-size:.85rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:.75rem; }

main{ max-width:920px; margin:0 auto; padding:0 1.25rem 1rem; }

.hero{
  position:sticky;
  top:0;
  z-index:90;
  margin:0 -1.25rem;
  padding:0 1.25rem;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.hero-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.75rem;
  min-height:var(--header-h);
  padding:.6rem 0;
}
.hero-identity{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
  transform-origin:left center;
  animation:hero-shrink linear both;
  animation-timeline:scroll(root block);
  animation-range:0 220px;
}
.headshot{
  position:relative;
  flex:0 0 auto;
  width:clamp(46px, 12dvw, 60px);
  height:clamp(46px, 12dvw, 60px);
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--accent-soft);
  box-shadow:var(--shadow-2);
  background:
    linear-gradient(140deg, var(--accent-soft), var(--surface-2));
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:700;
  color:var(--accent-deep);
  letter-spacing:.02em;
}
.headshot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.headshot img[hidden]{ display:none; }

.hero-name{
  margin:0;
  min-width:0;
  font-family:var(--display);
  font-size:clamp(.92rem, 3.1dvw, 1.4rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  text-wrap:balance;
}

.site-nav ul{
  display:flex;
  align-items:center;
  gap:.15rem;
  list-style:none;
  margin:0;
  padding:.25rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, #fff 78%, transparent);
  box-shadow:var(--shadow-1);
}
.site-nav a{
  display:inline-block;
  padding:.38rem .5rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible{
  color:var(--accent-deep);
  background:var(--accent-soft);
  transform:translateY(-1px);
}
.site-nav a[aria-current="true"]{
  color:#fff;
  background:linear-gradient(140deg, var(--accent), var(--accent-deep));
  box-shadow:0 6px 14px -8px rgba(15,107,82,.9);
}

.intro-block{
  padding:2.5rem 0 1rem;
  animation:fadeup .9s var(--ease) both;
}
h2.role{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.75rem, 7.2dvw, 3rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.03em;
  min-height:2.3em;
}
.role-word{
  background:linear-gradient(120deg, var(--accent), #2f6da3);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cursor{
  display:inline-block;
  width:.45ch;
  height:.95em;
  vertical-align:-.08em;
  margin-left:3px;
  border-radius:2px;
  background:var(--accent);
  opacity:0;
  animation:blink 1s steps(1) infinite .5s;
}
.intro-lede{
  max-width:46ch;
  margin:1rem 0 0;
  color:var(--text-muted);
  font-size:1rem;
}

/* Availability facts under the lede */
.fact-list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .9rem;
  list-style:none;
  margin:1.1rem 0 0;
  padding:0;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-muted);
}
.fact-list li{ display:flex; align-items:center; gap:.4rem; }
.fact-list li + li::before{
  content:"";
  width:4px; height:4px;
  border-radius:50%;
  background:var(--border);
  margin-right:.5rem;
}
.fact-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#1c8f5f;
  box-shadow:0 0 0 3px rgba(28,143,95,.18);
}

.intro-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.4rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.65rem 1.05rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover, .btn:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.btn-primary{
  background:linear-gradient(140deg, var(--accent), var(--accent-deep));
  border-color:transparent;
  color:#fff;
}

section{ scroll-margin-top:calc(var(--header-h) + 16px); }

.section-title{
  position:sticky;
  top:var(--header-h);
  z-index:80;
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin:0 -1.25rem 1.25rem;
  padding:.85rem 1.25rem;
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-0.015em;
  color:var(--text);
  background:color-mix(in srgb, var(--bg) 68%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  isolation:isolate;
}
.section-title::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, var(--border), transparent);
}
.section-title .index{
  font-size:.72rem;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:6px;
  padding:.12rem .45rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.section-lede{
  max-width:62ch;
  margin:0 0 1.2rem;
  color:var(--text-muted);
  font-size:.9rem;
}

.skills{ margin:2.5rem 0 3.5rem; }
.marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:.75rem;
  padding:.4rem .25rem 1rem;
  animation:scroll 55s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }

.skill-card{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  width:158px;
  height:66px;
  padding:0 1rem;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-1);
}
.skill-card .icon-chip{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:9px;
  background:var(--surface-2);
  display:grid;
  place-items:center;
}
.skill-card .icon-chip img{ width:22px; height:22px; object-fit:contain; }
.skill-card .icon-chip-fallback{
  font-family:var(--display);
  font-size:.72rem;
  font-weight:700;
  color:var(--accent-deep);
}
.skill-card .skill-name{
  flex:1 1 auto;
  min-width:0;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.about{ margin:0 0 3.5rem; }
.about-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.6rem 1.35rem;
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.about-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, var(--accent), transparent);
}
.about-quote{
  text-align:center;
  margin:0 0 1rem;
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:-0.01em;
}
.about-body{ margin:0; color:var(--text-muted); }
.about-card p + p{ margin-top:1rem; }
.about-body strong{ color:var(--text); }
.about-line{
  margin:0;
  font-family:var(--display);
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
}
.about-line + .about-line{ margin-top:.4rem; }
.about-tags{
  display:flex; flex-wrap:wrap; gap:.4rem;
  list-style:none; margin:1.25rem 0 0; padding:0;
}
.about-tags li{
  font-size:.72rem;
  font-weight:600;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border-radius:999px;
  padding:.3rem .7rem;
}

/* What I Do */
.capability{ margin:0 0 3.5rem; }
.capability-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
  list-style:none;
  margin:0;
  padding:0;
}
.capability-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.25rem;
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.capability-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
}
.cap-icon{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent-deep);
  margin-bottom:.8rem;
}
.cap-icon svg{ width:20px; height:20px; }
.capability-card h3{
  margin:0 0 .45rem;
  font-family:var(--display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-0.015em;
}
.capability-card p{ margin:0; color:var(--text-muted); font-size:.88rem; }
.cap-tags{
  display:flex; flex-wrap:wrap; gap:.35rem;
  list-style:none; margin:.9rem 0 0; padding:0;
}
.cap-tags li{
  font-size:.7rem;
  font-weight:600;
  color:var(--text-muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.2rem .5rem;
}

.experience{ margin:0 0 3.5rem; }
.research{ margin:0 0 3.5rem; }

.work{ margin:0 0 3.5rem; }
.work-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.35rem;
  box-shadow:var(--shadow-2);
}
.work-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
}
.work-head-text{ min-width:0; }
.work-logo{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,#31A8E0,#1E86C6);
  color:#fff;
  box-shadow:0 8px 18px -12px rgba(30,134,198,.9);
}
.work-logo-neutral{ background:linear-gradient(140deg, var(--accent), var(--accent-deep)); }
.work-logo-alt{ background:linear-gradient(140deg,#2FA37A,#16795A); }
.work-logo-research{ background:linear-gradient(140deg,#6A5AE0,#3E2FAE); }
.work-logo svg{ width:24px; height:24px; }
.work-title{
  margin:0;
  min-width:0;
  font-family:var(--display);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-0.015em;
}
.work-role{ margin:.1rem 0 0; font-size:.8rem; color:var(--text-muted); }
.work-body{ margin:1rem 0 0; color:var(--text-muted); }
.work-body + .work-body{ margin-top:.85rem; }
.work-body strong{ color:var(--text); font-weight:600; }

.bullet-list{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  color:var(--text-muted);
}
.bullet-list li{
  position:relative;
  padding-left:1.15rem;
  font-size:.9rem;
}
.bullet-list li + li{ margin-top:.55rem; }
.bullet-list li::before{
  content:"";
  position:absolute;
  left:.1rem; top:.62em;
  width:6px; height:6px;
  border-radius:2px;
  background:var(--accent);
  opacity:.65;
}
.bullet-list strong{ color:var(--text); font-weight:600; }

.metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.6rem;
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
}
.metrics li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.75rem .85rem;
}
.metric-value{
  display:block;
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:700;
  color:var(--accent-deep);
  line-height:1.2;
}
.metric-label{ display:block; font-size:.72rem; color:var(--text-muted); line-height:1.5; margin-top:6px; }

.work-links{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:1.3rem;
}
.chip-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:.78rem;
  font-weight:600;
  text-decoration:none;
  color:var(--text);
  transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.chip-link:hover, .chip-link:focus-visible{
  transform:translateY(-2px);
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-deep);
}
.work-card + .work-card{ margin-top:1rem; }

/* GitHub repositories */
.repos{ margin:0 0 3.5rem; }
.repo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
  list-style:none;
  margin:0;
  padding:0;
}
.repo-card a{
  display:block;
  height:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.05rem 1.15rem;
  text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.repo-card a:hover, .repo-card a:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
}
.repo-card h3{
  margin:0 0 .35rem;
  font-family:var(--display);
  font-size:.92rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
}
.repo-card p{ margin:0; font-size:.85rem; color:var(--text-muted); }
.repo-lang{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.8rem;
  font-size:.72rem;
  font-weight:600;
  color:var(--text-muted);
}
.lang-dot{
  width:9px; height:9px;
  border-radius:50%;
  display:inline-block;
}
.lang-js{ background:#F1E05A; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.lang-html{ background:#E34C26; }

.academic{ margin:0 auto 3rem; }
.academic-track{ position:relative; padding:1.5rem 0 .5rem; }
.academic-path{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible; z-index:0;
}
.academic-path .path-bg{ fill:none; stroke:var(--border); stroke-width:3; stroke-linecap:round; }
.academic-path .path-progress{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; }
.academic-dot{ fill:var(--accent); filter:drop-shadow(0 2px 5px rgba(15,107,82,.4)); }

.academic-list{ position:relative; list-style:none; margin:0; padding:0; z-index:1; }
.academic-item{ position:relative; display:flex; align-items:center; min-height:230px; }
.academic-item[data-side="left"]{ justify-content:flex-start; }
.academic-item[data-side="right"]{ justify-content:flex-end; }

.academic-card{
  width:min(68%, 300px);
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.1rem 1.2rem;
  box-shadow:var(--shadow-2);
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.academic-item.in-view .academic-card{ opacity:1; transform:translateY(0); }
.academic-year{
  display:inline-block;
  font-family:var(--display);
  font-size:.78rem; font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
  padding:.15rem .55rem;
  border-radius:6px;
  margin-bottom:.5rem;
}
.academic-degree{
  margin:0 0 .3rem;
  font-family:var(--display);
  font-size:.98rem; font-weight:600;
  line-height:1.35;
}
.academic-meta{ margin:0; font-size:.82rem; color:var(--text-muted); }
.academic-meta strong{ color:var(--text); }

/* Certifications, leadership, languages */
.cred-list{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:.6rem;
}
.cred-list li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.85rem 1rem;
}

.cred-list li a{
  text-decoration: none;
}
.cred-label{
  display:block;
  font-family:var(--display);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--accent);
  margin-bottom:.3rem;
}
.cred-value{ display:block; font-size:.85rem; color:var(--text-muted); }

.site-footer{
  position:relative;
  margin-top:2rem;
  background:
    radial-gradient(40rem 20rem at 50% -40%, var(--accent-soft) 0%, transparent 70%),
    var(--surface);
  border-top:1px solid var(--border);
  padding:3rem 1.25rem 2.25rem;
}
.footer-inner{ max-width:720px; margin:0 auto; text-align:center; }
.footer-name{
  font-family:var(--display);
  font-size:1.35rem; font-weight:700;
  margin:0 0 .3rem;
  letter-spacing:-0.02em;
}
.footer-tag{ font-size:.85rem; color:var(--text-muted); margin:0 0 .9rem; }
.footer-cta{
  max-width:44ch;
  margin:0 auto 1.6rem;
  font-size:.88rem;
  color:var(--text-muted);
}
.footer-cta a{
  font-weight:600;
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}

.footer-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.55rem;
  list-style:none;
  margin:0 auto 1.75rem;
  padding:0;
  max-width:520px;
  text-align:left;
}
.footer-links a{
  display:flex; align-items:center; gap:.55rem;
  padding:.7rem .85rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  font-size:.82rem;
  font-weight:600;
  box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.footer-links a:hover, .footer-links a:focus-visible{
  transform:translateY(-2px);
  border-color:var(--accent);
  color:var(--accent-deep);
  box-shadow:var(--shadow-2);
}
.footer-links svg{ width:18px; height:18px; flex:0 0 auto; }

.social-list{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem; margin:0 0 1.75rem; padding:0;
}
.social-list a{
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#FFFFFF;
  color:var(--text-muted);
  text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social-list a:hover, .social-list a:focus-visible{
  color:var(--accent-deep);
  background:var(--accent-soft);
  border-color:var(--accent);
  transform:translateY(-3px);
}
.social-list svg{ width:19px; height:19px; }
.footer-copy{ font-size:.78rem; color:var(--text-muted); margin:0; }

/* was targeting .hero-bar, which carries no border, so the divider never appeared */
.hero.is-compact{
  border-bottom-color:var(--border);
  box-shadow:0 10px 30px -26px rgba(20,20,15,.7);
}

@keyframes hero-shrink{
  from{ transform:scale(1.1); }
  to{ transform:scale(1); }
}
@supports not (animation-timeline: scroll()){
  .hero-identity{ animation:none; transform:scale(1.1); transition:transform .45s var(--ease); }
  .hero.is-compact .hero-identity{ transform:scale(1); }
}

@keyframes blink{ 50%{ opacity:1; } }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes fadeup{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (min-width:560px){
  .footer-links{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .site-nav a{ font-size:.8rem; padding:.45rem .85rem; }
  .repo-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:640px){
  :root{ --header-h:86px; }
  .headshot{ width:68px; height:68px; font-size:1.1rem; }
  .academic-item{ min-height:260px; }
  .academic-card{ width:min(54%, 320px); padding:1.3rem 1.4rem; }
  .academic-degree{ font-size:1.05rem; }
  .section-title{ font-size:1.35rem; }
  .about-card{ padding:2rem 2.1rem; }
  .about-quote{ font-size:1.2rem; }
  .work-card{ padding:1.9rem; }
  .work-title{ font-size:1.2rem; }
  .metrics{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .skill-card{ width:172px; height:76px; }
  .skill-card .icon-chip{ width:40px; height:40px; }
  .skill-card .icon-chip img{ width:26px; height:26px; }
  .skill-card .skill-name{ font-size:.85rem; }
  .capability-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .capability-card{ padding:1.4rem 1.3rem; }
  .cred-list{ grid-template-columns:1fr; }
}
@media (min-width:1024px){
  .academic-item{ min-height:290px; }
  .academic-card{ width:min(45%, 360px); }
  .headshot{ width:76px; height:76px; }
  .skill-card{ width:196px; height:84px; }
  .skill-card .icon-chip{ width:46px; height:46px; }
  .skill-card .icon-chip img{ width:30px; height:30px; }
}