/* Experience / CV page (/experience). Shared tokens and chrome come from /assets/css/style.css. */

body {
  --ch: var(--ch2);
}

.page-hero .display {
  max-width: 14ch;
}

/* Indent the intro to line up with the roles, leaving the left margin to the timeline rail. */
.page-cv .page-hero .wrap {
  padding-left: calc(var(--gutter) + clamp(36px, 5vw, 72px));
}

.cv {
  padding-bottom: clamp(90px, 12vw, 160px);
}

/* The timeline rail. The oscilloscope draws a vertical waveform along it (page-scope.js). */
.cv-grid {
  position: relative;
  padding-left: calc(var(--gutter) + clamp(36px, 5vw, 72px));
}

.cv-rail {
  position: absolute;
  left: calc(var(--gutter) + 6px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--line-2), var(--line-2) 94%, transparent);
}

.roles {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  margin-top: 36px;
}

.role,
.edu-block {
  position: relative;
}

.role::before,
.edu-block::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(36px, 5vw, 72px) + 1px);
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--c, var(--ch1));
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px var(--c, var(--ch1));
}

.role-when {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c, var(--ch1));
}

.role-now {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c);
  color: #111;
}

.role-org {
  margin-top: 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  font-variation-settings: "wdth" 85;
  letter-spacing: -0.04em;
  line-height: 1;
}

.role-org.pub-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  font-variation-settings: normal;
}

.role-sub {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}

.role-title {
  margin-top: 10px;
  max-width: 70ch;
  color: var(--ink-2);
}

.role-title .serif {
  font-size: 1.3em;
  color: var(--ink);
}

.role-points {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  max-width: 72ch;
  color: var(--ink-2);
}

.role-points li {
  position: relative;
  padding-left: 20px;
}

.role-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 9px;
  height: 1px;
  background: var(--c, var(--ch1));
}

.role-tech {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--ink-3);
}

.role-tech a {
  color: var(--ink);
}

.cv-section {
  margin-top: clamp(80px, 10vw, 130px);
  margin-bottom: 30px;
}

.edu-block {
  --c: var(--ch1);
}

.certs {
  border-bottom: 1px solid var(--line);
}

.certs li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.certs time {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-3);
}

.certs li span:nth-child(2) {
  font-weight: 500;
}

.certs li span:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  text-align: right;
}

.certs a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cv-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 56px;
}

@media (max-width: 700px) {
  .certs li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .certs li span:nth-child(3) {
    text-align: left;
  }
}