* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light dark;
  --font-family:
    ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Garamond,
    "Noto Serif", "Liberation Serif", "DejaVu Serif", serif;
  --font-size: 12pt;
  --line-height: 1.45;
  --measure: 46rem;
  --color: light-dark(#111, #e8e8ea);
  --body-bg-color: light-dark(white, #16161a);
  /* Dark variant keeps link contrast close to the light one (~7.5:1 vs ~8:1) */
  --theme-color: light-dark(#3a1eed, #a99bff);
  --link-color: var(--theme-color);
  --divider-color: color-mix(in srgb, var(--theme-color) 12%, #999);
  /* Secondary text; the divider color is too light for text on white (~3.3:1).
     Both themes stay above 4.5:1 (WCAG AA). */
  --muted-color: color-mix(in srgb, var(--theme-color) 12%, light-dark(#707070, #999));
  /* Slightly dimmed body text: role titles and highlights */
  --dimmed-color: color-mix(in srgb, var(--color) 75%, var(--body-bg-color));
}

/* Set by the theme toggle in theme.js; without it the OS setting wins */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background-color: var(--body-bg-color);
  color: var(--color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  print-color-adjust: exact;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link-color);
  text-decoration: none;

  &:hover,
  &:focus-visible {
    text-decoration: underline;
  }
}

svg {
  flex: 0 0 auto;
  height: 1em;
  width: 1em;
}

.toolbar {
  align-items: center;
  display: flex;
  font-size: 10pt;
  gap: 0.75rem;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: var(--measure);
  padding: 1rem 1.5rem 0;
}

.icon-button {
  align-items: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--link-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.15rem;
  padding: 0.3rem;

  &:hover,
  &:focus-visible {
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
  }
}

/* One icon per theme; show the current one */
.theme-toggle svg {
  display: none;
}

:root:not([data-theme]) .theme-auto,
:root[data-theme="light"] .theme-sun,
:root[data-theme="dark"] .theme-moon {
  display: block;
}

main {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 1rem 1.5rem 3rem;
}

.masthead {
  align-items: flex-start;
  display: flex;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;

  & h1 {
    font-size: 2rem;
    line-height: 1.1;
  }

  & address {
    font-size: 10pt;
    font-style: normal;
  }

  & .contact {
    list-style: none;

    & li {
      align-items: center;
      display: flex;
      gap: 0.4rem;
      justify-content: flex-end;
    }

    & svg {
      color: var(--muted-color);
      font-size: 0.9em;
    }
  }

  @media screen and (max-width: 600px) {
    flex-direction: column;

    & .contact li {
      justify-content: flex-start;
    }
  }
}

section {
  margin-top: 1.5rem;

  & h2 {
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 0.75rem;
    padding-bottom: 0.2rem;
  }
}

/* Small uppercase labels: section headings and the "Earlier" subheading */
section h2,
.subheading {
  color: var(--muted-color);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.subheading {
  margin: 1rem 0 0.3rem;
}

/* Secondary text: dates, locations, promotion paths, extra talk links */
.path,
.location,
.dates,
.extra {
  color: var(--muted-color);
  font-size: 0.9rem;
}

.dates {
  white-space: nowrap;
}

.role {
  font-weight: bold;
}

/* Text on the left, dates on the right */
.job header,
.earlier li {
  align-items: baseline;
  display: flex;
  gap: 0 1rem;
  justify-content: space-between;
}

.job {
  & + & {
    margin-top: 1rem;
  }

  & header {
    flex-wrap: wrap;
  }

  & h3 {
    font-size: 1rem;
    font-weight: normal;
  }

  /* Promotion path at this company, oldest title first */
  & .path::before {
    content: "↳ ";
  }

  & .summary {
    font-size: 0.95rem;
  }

  /* Smaller and dimmed, under jobs and under roles alike */
  & .highlights {
    color: var(--dimmed-color);
    font-size: 0.9rem;
    /* Also inside a role's timeline entry, where it would default to circles */
    list-style-type: disc;
    margin-top: 0.3rem;
    padding-left: 1.1rem;

    & li + li {
      margin-top: 0.15rem;
    }
  }
}

/* Titles held at one company: a dot per role, joined by a line. Smaller and
   dimmer than the job heading, so the company stays the main line. */
.roles {
  font-size: 0.9rem;
  list-style: none;
  margin-top: 0.3rem;

  & > li > p:first-child {
    color: var(--dimmed-color);
  }

  & .dates {
    font-size: 0.85rem;
  }

  & > li {
    padding-left: 1.25rem;
    position: relative;

    &::before {
      background-color: var(--divider-color);
      border-radius: 50%;
      content: "";
      height: 0.45rem;
      left: 0.15rem;
      position: absolute;
      top: 0.5em;
      width: 0.45rem;
    }

    &:not(:last-child) {
      padding-bottom: 0.5rem;

      &::after {
        background-color: var(--divider-color);
        bottom: -0.2em;
        content: "";
        left: calc(0.375rem - 0.5px);
        position: absolute;
        top: calc(0.5em + 0.7rem);
        width: 1px;
      }
    }
  }
}

.earlier {
  font-size: 0.95rem;
  list-style: none;

  /* On narrow screens the dates go below the text; keep entries apart */
  @media screen and (max-width: 600px) {
    & li {
      flex-wrap: wrap;
    }

    & li + li {
      margin-top: 0.4rem;
    }
  }
}

.rows {
  column-gap: 1.25rem;
  display: grid;
  font-size: 0.95rem;
  grid-template-columns: max-content 1fr;
  row-gap: 0.25rem;

  & dt {
    color: var(--muted-color);
  }

  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;

    & dd + dt {
      margin-top: 0.4rem;
    }
  }
}

@media print {
  /* Paper is white, so never print the dark theme, even when the toggle picked it */
  :root,
  :root[data-theme] {
    color-scheme: light;
    --font-size: 10pt;
  }

  .hidden-print {
    display: none !important;
  }

  @page {
    margin: 12mm 14mm;
  }

  main {
    max-width: none;
    padding: 0;
  }

  /* When the resume runs past one page: never strand a heading, a job header or
     a role's title at the bottom of a page, and never split a bullet or a label
     from its value. Jobs and roles may break between their parts, so one taller
     than the space left does not jump to the next page and leave its section
     heading behind. */
  h2,
  .subheading,
  .job > header,
  .job > .path,
  .roles > li > p,
  .rows dt {
    break-after: avoid;
  }

  .highlights li,
  .earlier li,
  .rows dd {
    break-inside: avoid;
  }
}