@charset "UTF-8";
:root {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 16px;
  font-synthesis: none;
  color: #303d45;
  background: #fff;
  --muted: #536775;
  --link: #304f65;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100svh; }
a {
  color: var(--link);
  text-decoration: underline dotted #a8bccb;
  text-underline-offset: 5px;
}
a:hover, a:focus-visible {
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
a:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; }
::selection { background: #dce9f1; }
h1 { font-weight: 400; font-size: 1.625rem; line-height: 1.5; margin: 0; letter-spacing: .015em; }
.name p { font-size: .875rem; color: var(--muted); margin: 3px 0 0; line-height: 1.7; }
.visual { overflow: hidden; background: #e6edf2; }
.gradient { display: block; width: 100%; height: 100%; }
.affiliations { margin: 46px 0 0; }
.affiliations>div { display: grid; grid-template-columns: 77px minmax(0,1fr); align-items: baseline; gap: 22px; }
.affiliations>div+div { margin-top: 14px; }
.affiliations dt { font-size: 1rem; line-height: 1.7; }
.affiliations dd { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.contact { display: flex; gap: 26px; flex-wrap: wrap; font-size: .875rem; line-height: 1.8; margin-top: 55px; }
.skip { position: fixed; top: -100px; left: 20px; padding: 10px; background: white; z-index: 5; }
.skip:focus { top: 16px; }
/* The gradient shares the exact dimensions of the content card. */
.card-main { max-width: 672px; margin: 167px auto 100px; padding: 0 38px 28px 24px; }
.card-frame { position: relative; isolation: isolate; }
.card-frame>.visual { position: absolute; inset: 0; transform: translate(24px,24px); z-index: -1; }
.profile-card { padding: 42px 44px 39px; background: #fff; border: 1px solid #e2e7eb; }
.card .affiliations { margin-top: 36px; }
.card .contact { margin-top: 41px; }
@media (max-width: 650px) {
  .affiliations>div { gap: 15px; }
  .card-main { margin-top: 127px; padding-right: 38px; }
  .profile-card { padding: 30px 25px; }
  .card-frame>.visual { transform: translate(16px,16px); }
}
@media (max-width: 420px) {
  .card .affiliations>div { grid-template-columns: 1fr; gap: 3px; }
  .card .affiliations>div+div { margin-top: 20px; }
  .card .contact { gap: 12px; }
}