@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: Univers;
  src: url("fonts/universltstd-webfont.woff2") format("woff2"),
       url("fonts/universltstd-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: UniversBold;
  src: url("fonts/universltstd-bold-webfont.woff2") format("woff2"),
       url("fonts/universltstd-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: Saans;
  src: url("fonts/SaansUprightsVF.woff2") format("woff2"),
       url("fonts/SaansUprightsVF.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
}

:root {
  --black: color(display-p3 0.122 0.122 0.122);
  --grey1: color(display-p3 0.18 0.162 0.183);
  --grey2: color(display-p3 0.439 0.439 0.439);
  --grey3: color(display-p3 0.86 0.86 0.86);
  --orange: color(display-p3 0.88 0.391 0.282);

  --a-accent: var(--orange);

  --left-col-tablet: 22ch;
  --right-col-tablet: minmax(0, 1fr);
  --column-gap-tablet: 1.2rem;

  --left-col-desktop: 30ch;
  --right-col-desktop: 65ch;
  --column-gap-desktop: 2rem;

  --desktop-content-width: calc(
    var(--left-col-desktop) +
    var(--right-col-desktop) +
    var(--column-gap-desktop)
  );

  --space-xs: 0.25em;
  --space-s: 0.5em;
  --space-m: 1em;
  --space-l: 1.6em;
  --space-xl: 3em;
  --space-xxl: 4em;
}

html,
body {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font: 1em / 1.4 Inter, system-ui, -apple-system, sans-serif;
  color: var(--black);
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-m);
  column-gap: 0;
  margin-inline: var(--space-m);
  margin-block: var(--space-m);
}

@media (min-width: 720px) {
  body {
    grid-template-columns: var(--left-col-tablet) var(--right-col-tablet);
    column-gap: var(--column-gap-tablet);
    margin-inline: var(--space-l);
    margin-block: var(--space-l);
  }
}

@media (min-width: 1004px) {
  body {
    grid-template-columns: var(--left-col-desktop) var(--right-col-desktop);
    column-gap: var(--column-gap-desktop);
    margin-inline: max(
      var(--space-l),
      calc((100vw - var(--desktop-content-width)) / 2)
    );
    margin-block: var(--space-xl);
  }
}

header,
main {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  row-gap: var(--space-xs);
  column-gap: 0;
}

@media (min-width: 720px) and (max-width: 1003px) {
  header h2,
  #profile p {
    padding-left: var(--column-gap-tablet);
  }
}

h1,
h2 {
  font-family: Saans, "Helvetica Neue", sans-serif;
  font-weight: 640;
  margin: 0;
}

h3,
h4 {
  font-family: Saans, "Helvetica Neue", sans-serif;
  font-weight: 400;
  margin: 0;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.04ex;
}

h2,
h3,
h4 {
  line-height: 1.3;
}

p {
  margin: 0;
  max-width: 60ch;
}

a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  color: var(--black);
}

a:hover {
  color: var(--a-accent);
  text-decoration-thickness: 2px;
}

a:visited {
  color: var(--black);
}

a:focus {
  color: var(--a-accent);
  outline: none;
  text-decoration: none;
}

/* Lists */

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 0 0.4em 0;
  padding-left: 1.2em;
}

li::before {
  content: "—";
  position: absolute;
  left: -0.3em;
  color: var(--grey2);
  font-weight: 200;
}

/* Header */

header {
  align-items: baseline;
}

header h1,
header h2 {
  grid-column: 1;
}

header h2 {
  font-family: Saans, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
}

@media (min-width: 720px) {
  header h1 {
    grid-column: 1;
  }

  header h2 {
    grid-column: 2;
  }
}

/* Main */

main {
  row-gap: var(--space-xl);
}

main section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  row-gap: var(--space-m);
}

main section:not(#education) {
  border-bottom: 1px solid var(--grey3);
  padding-bottom: var(--space-xl);
}

/* Default section placement */

section:not(#contact, #experience) h2,
section:not(#contact, #experience) h3,
section:not(#contact, #experience) p,
section:not(#contact, #experience) > ul {
  grid-column: 1;
}

@media (min-width: 720px) {
  section:not(#contact, #experience) h2,
  section:not(#contact, #experience) h3 {
    grid-column: 1;
  }

  section:not(#contact, #experience) p,
  section:not(#contact, #experience) > ul {
    grid-column: 2;
  }
}

/* Contact */

#contact {
  grid-row: 1;
  grid-column: 1;
}

#contact dl,
#contact dt,
#contact dd {
  padding: 0;
  margin: 0;
}

#contact dd {
  display: block;
  line-height: 1.5;
}

#contact dt {
  display: none;
}

@media (min-width: 720px) {
  #contact h2 {
    display: none;
  }
}

/* Profile */

#profile {
  grid-column: 1;
}

#profile p {
  grid-column: 1;
}

@media (min-width: 720px) {
  #profile {
    grid-column: 2;
  }

  #profile h2 {
    display: none;
  }

  #profile p {
    grid-column: 2;
  }
}

/* Skills */

#skills {
  row-gap: var(--space-l);
}

/* Experience */

#experience {
  display: grid;
  grid-template-columns: subgrid;
}

#experience h2 {
  grid-column: 1;
  line-height: 1.3;
}

#experience ul.experience-list,
#experience ul.experience-list > li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  row-gap: var(--space-m);
  column-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

#experience ul.experience-list > li {
  padding-left: 0;
}

#experience ul.experience-list > li::before {
  content: none;
}

.job-details {
  grid-column: 1;
  max-width: 22ch;
  text-wrap: balance;
}

.job-details h3 {
  margin-bottom: 0.25em;
}

.job-details h4 {
  margin-bottom: 0.5em;
}

.job-description {
  grid-column: 1;
}

.job-description ul {
  margin: 0;
  padding: 0;
}

.job-description li {
  margin: 0 0 0.5em 0;
  padding-left: 1.2em;
}

@media (min-width: 720px) {
  .job-description {
    grid-column: 2;
  }
}

@media (max-width: 719px) {
  .job-details {
    display: block;
    max-width: none;
  }
}