*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar-height) + 1rem); font-size: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--regular) var(--body-size)/1.6 var(--font); font-synthesis: none; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
h1, h2, h3 { line-height: 1.15; }
a { color: inherit; text-underline-offset: .24em; }
button, input, textarea { font: inherit; border-radius: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.measure { width: min(var(--measure), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: .5rem; left: var(--gutter); background: var(--ink); color: var(--reverse); padding: .5rem 1rem; transform: translateY(-190%); }
.skip:focus { transform: none; }
.masthead, .compact-head { background: var(--blue); color: var(--reverse); z-index: 4; }
.masthead { position: relative; height: var(--mast-height); overflow: clip; }
.mast-inner { position: relative; height: 100%; }
.mast-space { display: none; }
.has-fold .masthead { position: fixed; inset: 0 0 auto; height: calc(var(--mast-height) - var(--fold)); }
.has-fold .mast-space { display: block; height: var(--mast-height); }
.hero-name, .hero-introduction { position: absolute; inset-inline: 0; }
.hero-name {
  top: calc((var(--bar-height) - 1.1 * var(--bar-title)) / 2 * (1 - var(--open)) + var(--mast-title-top) * var(--open));
  font-size: calc(var(--bar-title) + (var(--display) - var(--bar-title)) * var(--open));
  line-height: 1.1; letter-spacing: -.047em; font-weight: var(--extra-bold); width: max-content; max-width: 100%;
}
.hero-name a, .compact-name { text-decoration: none; }
.hero-introduction {
  pointer-events: none;
  top: calc(var(--mast-title-top) + var(--display) * 1.1 + var(--space-6));
  max-width: 47rem; opacity: clamp(0, (var(--open) - .42) * 2.4, 1);
  transform: translateY(calc(-1 * var(--fold) * .56));
}
.hero-role { font-size: clamp(1.38rem, 2.5vw, 2.1rem); font-weight: var(--bold); line-height: 1.3; }
.hero-statement { margin-top: var(--space-4); max-width: 56ch; font-size: var(--body-large); line-height: 1.55; }
.navigation { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.75rem); color: var(--nav-text); }
.mast-inner .navigation { position: absolute; top: 0; right: 0; height: var(--bar-height); z-index: 1; }
.navigation a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: var(--bold); }
.navigation a:hover, .navigation a[aria-current="page"], .text-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.compact-head { position: sticky; top: 0; }
.compact-inner { min-height: var(--bar-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.compact-name { font-weight: var(--extra-bold); font-size: var(--bar-title); letter-spacing: -.04em; }
.results-section { padding-block: var(--section-space); }
.section-label, .page-heading { display: inline-block; max-width: 100%; background: var(--blue); color: var(--reverse); padding: .42em .7em .49em; font-size: clamp(1.25rem, 2.1vw, 1.65rem); font-weight: var(--extra-bold); letter-spacing: -.03em; }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--space-8); }
.results > div { display: flex; flex-direction: column; }
.metric { order: -1; font-size: clamp(2.25rem, 4.25vw, 3.5rem); font-weight: var(--extra-bold); line-height: 1.1; letter-spacing: -.055em; }
.results dt { font-weight: var(--bold); margin-top: var(--space-2); line-height: 1.4; }
.metric-detail { margin-top: .3rem; max-width: 31ch; }
.experience-section, .qualifications { padding-bottom: var(--section-space); }
.role-row, .qualification-grid { display: grid; grid-template-columns: minmax(13rem, .85fr) minmax(0, 1.7fr); gap: clamp(2rem, 5vw, 5rem); }
.role-row { padding-block: var(--space-8); border-bottom: 1px solid rgb(0 0 0 / .2); }
.role-row:last-of-type { padding-bottom: 0; border-bottom: 0; }
.dates { font-weight: var(--bold); }
.role-info h3, .qualification-grid h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: var(--bold); margin: .45rem 0 .35rem; letter-spacing: -.025em; }
.work-list { padding-inline-start: 1.2rem; max-width: 68ch; }
.work-list li { padding-inline-start: .15rem; }
.work-list li + li { margin-top: .75rem; }
.qualification-grid { margin-top: var(--space-6); grid-template-columns: 1fr 1fr; }
.qualification-grid p + p { margin-top: var(--space-2); }
.contact-section { background: var(--ink); color: var(--reverse); padding-block: var(--section-space); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.7fr; gap: clamp(2rem, 5vw, 5rem); }
.contact-grid h2 { font-size: clamp(2rem, 4vw, 3.15rem); font-weight: var(--extra-bold); letter-spacing: -.045em; }
.contact-grid h2 + p { margin-top: var(--space-4); max-width: 28ch; }
form { width: 100%; max-width: 42rem; }
form label { display: block; font-weight: var(--bold); margin-bottom: var(--space-2); }
input, textarea { display: block; width: 100%; padding: .7rem .85rem; border: 0; background: var(--field-fill); color: var(--field-text); min-height: var(--control); }
input:focus-visible, textarea:focus-visible { outline-color: var(--reverse); }
textarea { resize: vertical; min-height: 7rem; }
input + label { margin-top: var(--space-4); }
.honeypot { display: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
button { background: var(--action-fill); color: var(--action-text); border: 0; font-weight: var(--bold); min-height: var(--control); padding: .65rem 1.4rem; cursor: pointer; }
button:hover { text-decoration: underline; text-underline-offset: .22em; }
button:disabled { cursor: wait; }
.status { flex: 1 1 13rem; }
.projects-page { padding-block: var(--section-space); }
.page-heading { font-size: clamp(2.2rem, 5vw, 4rem); }
.projects-page p { margin-block: var(--space-6); font-size: var(--body-large); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: var(--bold); }
@media (max-width: 42rem) {
  .navigation { gap: 1rem; }
  .connect-link { display: none !important; }
  .results { grid-template-columns: 1fr; gap: var(--space-6); }
  .results > div { display: grid; grid-template-columns: minmax(6.35rem, .55fr) 1.45fr; column-gap: var(--space-4); align-items: start; }
  .metric { grid-column: 1; grid-row: 1 / 3; font-size: clamp(2rem, 7.5vw, 3rem); }
  .results dt, .metric-detail { grid-column: 2; margin-top: 0; }
  .metric-detail { margin-top: .2rem; }
  .role-row, .qualification-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .qualification-grid, .contact-grid { gap: var(--space-6); }
}
@media (forced-colors: active) {
  .section-label, .page-heading, button, input, textarea { border: 1px solid currentColor; }
}