@font-face {
  font-family:'Portfolio Sans VF';
  src:url('assets/fonts/portfolio-sans-vf.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
:root { --vp-body-size:16px; }
/* Narrative copy gets room to breathe; interface labels retain their hierarchy. */
:is(.intro,.section-heading>p,.storyline p,.experience-lead>p:not(.eyebrow),.work-evidence p,.experience-takeaway,.experience-row p:not(.eyebrow),.analysis-evidence p,.case-subtitle,.case-overview p:not(.tech),.fitness-explanations p,.detail-line p,.gallery-evaluation p,.more-items p:not(.eyebrow),.about>div>p:not(.eyebrow),.skills dd) {
  font-family:'Portfolio Sans VF',var(--sans);
  font-weight:400;
  line-height:var(--vp-leading,2);
  font-size:var(--vp-copy-size,var(--vp-body-size));
  overflow-wrap:break-word;
  text-wrap:pretty;
}
.hero .intro { --vp-copy-size:17px; --vp-leading:1.95; }
.section-heading>p,.storyline p,.analysis-evidence p,.fitness-explanations p,.more-items p:not(.eyebrow) { --vp-copy-size:15px; }
.experience-lead { max-width:790px; }
.skills dd>span { font-size:12px; line-height:1.9; }
.vp-word,.vp-copy>.vp-word {
  display:inline-block;
  white-space:nowrap;
  font-size:inherit;
  color:inherit;
  letter-spacing:inherit;
  margin:0;
  padding:0;
  vertical-align:baseline;
}
.vp-letter { position:relative; display:inline-block; white-space:pre; }
.vp-base { visibility:hidden; user-select:none; font-variation-settings:'wght' 400; font-weight:400; }
.vp-ink {
  position:absolute;
  inset:0;
  font-variation-settings:'wght' 400;
  transition:font-variation-settings .16s ease-out;
}
.vp-copy>.vp-accessible {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:pre;
  border:0;
  user-select:none;
}
@media(max-width:1000px) {
  .fitness-explanations { gap:28px; }
}
@media(max-width:600px) {
  :root { --vp-body-size:14px; }
  .section-heading>p,.storyline p,.analysis-evidence p,.fitness-explanations p,.more-items p:not(.eyebrow) { --vp-copy-size:14px; }
  .hero .intro { --vp-copy-size:14.5px; }
  .storyline p { --vp-copy-size:13px; }
  .skills dd>span { font-size:12px; }
  .fitness-explanations { grid-template-columns:1fr; gap:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .vp-ink { transition:none; }
}