:root {
  --white: #ffffff;
  --black: #000000;
  --grey: #6b6b6b;
  --grey-light: #a8a8a8;
  --rule: #e6e6e6;
  --bar-law: #000000;
  --bar-build: #8c8c8c;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--grey); }
a:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Grid: a narrow left column for labels and years, a wide right column for content */
.row {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 48px;
}

/* Top bar */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  font-size: 15px;
}
.top .home { font-weight: 600; text-decoration: none; }
.top nav { display: flex; gap: 28px; }
.top nav a { text-decoration: none; color: var(--grey); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--black); }

/* Name */
.name {
  margin: 72px 0 0;
  font-size: clamp(64px, 13vw, 168px);
  line-height: 0.88;
  font-weight: 600;
  letter-spacing: -0.055em;
}
.name span { display: block; }
.name span + span { padding-left: 0.62em; color: var(--grey-light); }

.intro { margin-top: 56px; }
.intro .label { color: var(--grey); font-size: 15px; padding-top: 4px; }
.intro p {
  margin: 0;
  max-width: 30em;
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: -0.012em;
}
.intro .links { margin-top: 20px; font-size: 15px; display: flex; gap: 24px; flex-wrap: wrap; }
.intro .links a { color: var(--grey); }
.intro .links a:hover { color: var(--black); }

/* Career span chart */
.span {
  margin-top: 120px;
  padding-top: 24px;
  border-top: 1px solid var(--black);
}
.span .label { color: var(--grey); font-size: 15px; }
.span .label p { margin: 0 0 18px; }
.key { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.key span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 1px;
}
.key .law::before { background: var(--bar-law); }
.key .build::before { background: var(--bar-build); }

.chart { position: relative; }
.lane { position: relative; height: 64px; }
.lane + .lane { margin-top: 8px; }
.bar {
  position: absolute;
  top: 26px;
  height: 12px;
  display: block;
  text-decoration: none;
}
.lane.law .bar { background: var(--bar-law); }
.lane.build .bar { background: var(--bar-build); }
.bar .tag {
  position: absolute;
  left: 0;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: var(--black);
}
.bar.up .tag { bottom: 18px; }
.bar.down .tag { top: 18px; }
.bar.end .tag { left: auto; right: 0; }
.bar:hover { opacity: 0.7; }

.axis {
  position: relative;
  height: 28px;
  margin-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--grey);
}
.axis span { position: absolute; top: 8px; transform: translateX(-50%); }
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }

/* Sections */
.block {
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--black);
}
.block > h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--grey);
}

.roles { list-style: none; margin: 0; padding: 0; }
.roles li {
  display: grid;
  grid-template-columns: 1fr 120px;
  column-gap: 32px;
  padding: 0 0 36px;
  scroll-margin-top: 24px;
}
.roles li + li { padding-top: 24px; border-top: 1px solid var(--rule); }
.roles h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.roles h3 .org { display: block; font-weight: 400; color: var(--grey); }
.roles p { margin: 12px 0 0; max-width: 36em; color: #2b2b2b; }
.roles .when {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 15px;
  color: var(--grey);
  padding-top: 4px;
}
.roles li:target h3 { text-decoration: underline; text-underline-offset: 5px; }

/* Writing list */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { padding: 0 0 32px; }
.posts li + li { padding-top: 24px; border-top: 1px solid var(--rule); }
.posts .date { font-size: 15px; color: var(--grey); }
.posts h3 { margin: 4px 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.posts h3 a { text-decoration: none; }
.posts p { margin: 0; max-width: 34em; color: var(--grey); }

.foot {
  margin-top: 120px;
  padding: 24px 0 56px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--grey);
}
.foot .links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot a { color: var(--grey); }
.foot a:hover { color: var(--black); }

@media (max-width: 820px) {
  .page { padding: 0 16px; }
  .row { grid-template-columns: 1fr; row-gap: 16px; }
  .name { margin-top: 40px; }
  .intro { margin-top: 36px; }
  .intro p { font-size: 20px; }
  .span, .block { margin-top: 72px; }
  .key { flex-direction: row; gap: 20px; margin-bottom: 8px; }
  .bar .tag { font-size: 11px; }
  .roles li { grid-template-columns: 1fr; }
  .roles .when { grid-column: 1; grid-row: auto; text-align: left; order: -1; padding: 0 0 4px; }
  .roles h3 { font-size: 20px; }
  .posts h3 { font-size: 24px; }
}

@media (max-width: 520px) {
  .bar .tag.long { display: none; }
}

.bar { box-shadow: inset -2px 0 0 var(--white); }
.roles li:last-child, .posts li:last-child { padding-bottom: 0; }