@font-face {
  font-family: "ResumeRoboto";
  src: url("fonts/roboto-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "ResumeRoboto";
  src: url("fonts/roboto-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "ResumeRoboto";
  src: url("fonts/roboto-italic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ink: #111;
  --paper: #fff;
  --screen: #f4f4f1;
  --screen-rule: #d8d6cf;
  --separator: #8a8a8a;
  --document-width: 210mm;
  --document-padding-block: clamp(2rem, 4vw, 2.8rem);
  --document-padding-inline: clamp(1.35rem, 5vw, 2.8rem);
  --section-gap: 1rem;
  --entry-gap: 0.78rem;
  --minor-gap: 0.34rem;
  --indent: 1rem;
  --heading-line: 1.3;
  --meta-line: 1.32;
  --body-line: 1.34;
  --list-item-gap: 0.28rem;
  /* One type scale shared by screen and print. Print overrides only these
     four values, so every element stays in proportion and cannot drift. */
  --fs-name: clamp(2rem, 4vw, 2.35rem);
  --fs-section: 1.2rem;
  --fs-entry: 1.08rem;
  --fs-body: 1rem;
}

html {
  min-width: 0;
  background: var(--screen);
  color: var(--ink);
  font: 400 16px/1.35 "ResumeRoboto", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-width: 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--screen);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.resume-document {
  inline-size: min(100%, var(--document-width));
  max-inline-size: var(--document-width);
  margin-inline: auto;
  padding: var(--document-padding-block) var(--document-padding-inline);
  border: 1px solid var(--screen-rule);
  background: var(--paper);
}

.resume-header {
  margin-block-end: 1.1rem;
  text-align: center;
}

.resume-header h1 {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.45rem;
  margin: 0.22rem 0 0;
  padding: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.contact-list li + li::before {
  content: "|";
}

.contact-list li + li::before,
.appearances span,
.project h3 span {
  color: var(--separator);
  font-weight: 400;
}

.resume-section {
  min-inline-size: 0;
  margin: 0;
}

.resume-section + .resume-section {
  margin-block-start: var(--section-gap);
}

.resume-section h2 {
  margin: 0 0 0.45rem;
  border-block-end: 1px solid currentColor;
  font-size: var(--fs-section);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: var(--heading-line);
  text-transform: uppercase;
  text-wrap: balance;
}

.company,
.project {
  min-inline-size: 0;
  margin: 0;
  padding-inline-start: var(--indent);
}

.company + .company {
  margin-block-start: var(--entry-gap);
}

.company h3,
.project h3 {
  display: inline-block;
  margin: 0 0 var(--minor-gap);
  font-size: var(--fs-entry);
  font-weight: 700;
  line-height: var(--heading-line);
}

.position,
.education-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 0.2rem 1rem;
  margin: 0 0 var(--minor-gap) var(--indent);
  font-size: var(--fs-body);
  line-height: var(--meta-line);
}

.position-followup {
  margin-block-start: 0.55rem;
}

.bullets {
  margin: 0;
  padding: 0 0 0 1.55rem;
  list-style: disc;
}

.bullets li {
  min-inline-size: 0;
  margin: 0 0 var(--list-item-gap);
  padding-inline-start: 0.1rem;
  font-size: var(--fs-body);
  line-height: var(--body-line);
  text-wrap: pretty;
}

.bullets li::marker {
  font-size: 0.85em;
}

.appearances {
  display: grid;
  row-gap: 0.38rem;
  margin: 0;
  padding: 0 0 0 var(--indent);
  list-style: none;
}

.appearances li {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: 0.46rem;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--meta-line);
  text-wrap: pretty;
}

.open-source .project {
  margin-block-end: 0.55rem;
}

.open-source .project:last-child {
  margin-block-end: 0;
}

.open-source .project h3 {
  margin-block-end: 0.22rem;
}

.project h3 em {
  font-weight: 400;
}

.education-row {
  margin-inline-end: 0;
}

.education-details {
  margin-block-start: 0;
  font-weight: 400;
}

.skill-list {
  display: grid;
  row-gap: 0.12rem;
  margin: 0;
  padding-inline-start: var(--indent);
}

.skill-list > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  column-gap: 0.6rem;
  font-size: var(--fs-body);
  line-height: var(--body-line);
}

.skill-list dt {
  font-weight: 700;
}

.skill-list dd {
  margin: 0;
}

@page {
  size: A4;
  margin: 0.5in;
}

@media print {
  :root {
    /* Print type scale: one 10pt body size everywhere, with two header
       steps above it. Overriding these four values keeps every section in
       proportion — no per-element point sizes to drift out of sync. */
    --fs-name: 22pt;
    --fs-section: 12pt;
    --fs-entry: 11pt;
    --fs-body: 10pt;
    --separator: #6a6a6a;
  }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  body {
    padding: 0;
  }

  a {
    text-decoration-thickness: 0.5pt;
    text-underline-offset: 1.4pt;
  }

  .resume-document {
    max-inline-size: none;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .resume-header {
    margin-block-end: 0.12in;
  }

  .resume-header h1 {
    line-height: 1;
  }

  .contact-list {
    margin-block-start: 0.03in;
    line-height: 1.25;
  }

  .resume-section + .resume-section {
    margin-block-start: 0.11in;
  }

  .resume-section h2 {
    margin-block-end: 0.04in;
    line-height: 1.22;
  }

  .company,
  .project {
    padding-inline-start: 0.12in;
  }

  .company + .company {
    margin-block-start: 0.07in;
  }

  .company h3,
  .project h3 {
    margin-block-end: 0.02in;
    line-height: 1.18;
  }

  .position,
  .education-row {
    column-gap: 0.18in;
    margin-block-end: 0.02in;
    margin-inline-start: 0.12in;
    line-height: 1.2;
  }

  .position-followup {
    margin-block-start: 0.055in;
  }

  .bullets {
    padding-inline-start: 0.2in;
  }

  .bullets li {
    margin-block-end: 0.016in;
    padding-inline-start: 0.02in;
    line-height: 1.18;
  }

  .appearances {
    row-gap: 0.022in;
    padding-inline-start: 0.12in;
  }

  .appearances li {
    column-gap: 0.07in;
    line-height: 1.18;
  }

  .open-source .project {
    margin-block-end: 0.052in;
  }

  .open-source .project h3 {
    margin-block-end: 0.018in;
  }

  .education-row {
    margin-inline-end: 0;
  }

  .skill-list {
    row-gap: 0.015in;
    padding-inline-start: 0.12in;
  }

  .skill-list > div {
    grid-template-columns: 1.5in minmax(0, 1fr);
    column-gap: 0.08in;
    line-height: 1.18;
  }

  .resume-section h2,
  .company h3,
  .project h3,
  .position {
    break-after: avoid;
  }

  .company,
  .project,
  .public-appearances,
  .education,
  .skills {
    break-inside: avoid;
  }
}

@media screen and (max-width: 760px) {
  body {
    padding: 0;
  }

  .resume-document {
    inline-size: 100%;
    border: 0;
    padding: 1.4rem 1rem;
  }

  .resume-header {
    text-align: left;
  }

  .resume-header h1 {
    font-size: 1.9rem;
  }

  .contact-list {
    justify-content: flex-start;
  }

  .contact-list li + li::before,
  .appearances span {
    content: none;
    display: none;
  }

  .position,
  .education-row,
  .appearances li,
  .skill-list > div {
    grid-template-columns: 1fr;
  }

  .appearances li {
    row-gap: 0.05rem;
  }

  .company,
  .project,
  .position,
  .education-row {
    padding-inline-start: 0;
    margin-inline-start: 0;
  }

  .bullets li {
    padding-inline-start: 0;
  }
}