:root {
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #171717;
  /* Move gradually from phone to desktop sizes between 30rem and 64rem. */
  --responsive-step: clamp(0rem, calc((100vw - 30rem) / 34), 1rem);
  --text-size: calc(.875rem + var(--responsive-step) * .375);
  --line-height: calc(var(--text-size) * 1.5);
  --text-gap: 0;
  --page-width: 70rem;
  --text-width: 40rem;
  --gutter: calc(1.25rem + var(--responsive-step) * 1.25);
  --page-top: calc(2rem + var(--responsive-step) * 3);
  --page-bottom: calc(2.5rem + var(--responsive-step) * 2.5);
  --section-gap: calc(2.5rem + var(--responsive-step) * 1.5);
  --entry-gap: var(--line-height);
  /* The frame's image inset completes one line of mission-to-image spacing. */
  --media-gap: calc(var(--line-height) - var(--image-inset));
  --gallery-gap: calc(1rem + var(--responsive-step));
  --gallery-tile: calc(11.5rem + var(--responsive-step) * 8.5);
  --image-inset: calc(.625rem + var(--responsive-step) * .625);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: var(--text-size); font-weight: 400; line-height: var(--line-height); -webkit-font-smoothing: antialiased; }
::selection { background: #e6e6e6; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 1px; }
h1, h2, p, ul, li, figure { margin: 0; padding: 0; }
h1, h2 { font-size: inherit; line-height: inherit; }
h1 { font-weight: 400; }
h2 { font-weight: 600; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
.page { width: min(var(--page-width), calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: var(--page-top) 0 var(--page-bottom); overflow-wrap: anywhere; }
main { display: grid; gap: var(--section-gap); min-width: 0; }
.intro, .section-heading, .project-title, .small-section, .education-list > li { display: grid; gap: var(--text-gap); min-width: 0; }
.intro { margin-bottom: var(--line-height); }
.intro-text { max-width: var(--text-width); }
.project { display: grid; gap: var(--media-gap); min-width: 0; }
.project, .small-section { scroll-margin-top: 2rem; }
.section-heading { grid-template-columns: minmax(0, 1fr); }
.project-media:empty { display: none; }
.project-gallery { display: flex; flex-direction: row; gap: var(--gallery-gap); align-items: flex-start; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: .75rem; }
.project-gallery > * { flex: 0 0 auto; scroll-snap-align: start; }
.project-gallery:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.project-gallery .gallery-frame { width: min(100%, var(--gallery-tile)); aspect-ratio: 1 / 1; position: relative; background: #fff; }
.project-gallery .gallery-frame img { position: absolute; inset: var(--image-inset); width: calc(100% - var(--image-inset) - var(--image-inset)); height: calc(100% - var(--image-inset) - var(--image-inset)); max-width: none; object-fit: contain; object-position: center; }
.education-list { display: grid; gap: var(--entry-gap); }
.interest-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--text-gap); }
.project-link { display: inline; color: inherit; font-size: inherit; font-weight: 400; text-decoration: none; }
.project-name { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; }
.project-link:hover .project-name { text-decoration-thickness: 2px; }
.skip-link { position: absolute; top: .75rem; left: var(--gutter); transform: translateY(-200%); padding: .5rem 1rem; background: #fff; }
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}