:root {
  color-scheme: light;
  --paper: #fffefa;
  --background: #f2f3ef;
  --ink: #222d2a;
  --muted: #58635e;
  --accent: #28594e;
  --line: #dce2dc;
  --detail: #f3f6f1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-block-start: 1.5rem;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

p,
ul,
ol {
  margin-block-start: 0;
}

.skip-link {
  position: fixed;
  z-index: 1;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--paper);
  border: 1px solid var(--accent);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.cv {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "identity main"
    "skills main"
    "footer footer";
  column-gap: 2.5rem;
  inline-size: calc(100% - 3rem);
  max-inline-size: 70rem;
  margin: 2.5rem auto;
  padding: 3rem;
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--accent);
  background: var(--paper);
  box-shadow: 0 0.25rem 2rem #1a2d2206;
  font-size: 0.9375rem;
}

.profile-card {
  grid-area: identity;
  min-inline-size: 0;
}

.portrait {
  display: block;
  inline-size: 144px;
  block-size: 144px;
  margin-block-end: 1.65rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
}

.sidebar-heading,
.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
}

.contact {
  font-size: 0.875rem;
}

.contact p {
  margin-block-end: 0.35rem;
}

.contact address {
  display: grid;
  gap: 0.4rem;
  font-style: normal;
}

.contact a {
  overflow-wrap: anywhere;
}

.section-nav {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  margin-block-start: 1.65rem;
  font-size: 0.875rem;
}

.section-nav a {
  padding-block: 0.15rem;
}

main {
  grid-area: main;
  min-inline-size: 0;
  padding-inline-start: 2.5rem;
  border-inline-start: 1px solid var(--line);
}

main:focus {
  outline: none;
}

.intro .eyebrow {
  margin-block-end: 0.6rem;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.headline {
  margin: 0.65rem 0 1rem;
  color: var(--accent);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.profile {
  margin-block-end: 0;
  max-inline-size: 66ch;
}

.main-section {
  margin-block-start: 2.25rem;
}

.section-heading {
  margin: 0 0 1.4rem;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid var(--line);
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.4;
}

.timeline {
  margin: 0;
  padding: 0 0 0 1.4rem;
  border-inline-start: 1px solid var(--line);
  list-style: none;
}

.job {
  position: relative;
}

.job::before {
  position: absolute;
  inset-block-start: 0.42rem;
  inset-inline-start: calc(-1.4rem - 0.29rem);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  content: "";
}

.current-job::before {
  background: var(--accent);
}

.job + .job {
  margin-block-start: 2.1rem;
}

.job-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.4rem 1rem;
}

.job h3 {
  margin: 0;
  font-size: 1.075rem;
  font-weight: 650;
  line-height: 1.4;
}

.job-title {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.period,
.education-list time {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.client {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.project {
  margin-block-start: 1.3rem;
}

.project h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.5;
}

.project p,
.job-summary {
  margin: 0;
}

.job-summary {
  margin-block-start: 0.65rem;
}

.project-stage {
  display: inline-block;
  margin-inline-start: 0.35rem;
  padding: 0 0.3rem;
  border: 1px solid #a5b9ae;
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 0.08em;
}

details {
  margin-block-start: 0.5rem;
}

summary {
  inline-size: fit-content;
  max-inline-size: 100%;
  padding-block: 0.15rem;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

summary::marker {
  color: var(--accent);
  font-size: 0.8em;
}

summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

details[open] {
  padding: 0.65rem 0.8rem;
  border-inline-start: 2px solid #a5b9ae;
  background: var(--detail);
}

.detail-body {
  padding-block-start: 0.4rem;
  font-size: 0.875rem;
}

.detail-body ul {
  margin: 0;
  padding-inline-start: 1.15rem;
}

.detail-body li + li {
  margin-block-start: 0.35rem;
}

.education-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.education-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
}

.education-list > li + li {
  margin-block-start: 1rem;
}

.education-list h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.education-list p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.training {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.training strong {
  color: var(--ink);
  font-weight: 600;
}

.skills {
  grid-area: skills;
  min-inline-size: 0;
  margin-block-start: 2.4rem;
}

.skill-group + .skill-group {
  margin-block-start: 1.35rem;
}

.skill-group h3 {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 650;
}

.skill-group ul,
.languages ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.85;
}

.languages {
  margin-block-start: 2.15rem;
}

.languages li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.75rem;
}

.languages span {
  color: var(--muted);
}

.page-footer {
  grid-area: footer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

.page-footer p {
  margin: 0;
}

@media (max-width: 62rem) {
  .cv {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 2rem;
    padding: 2rem;
  }

  main {
    padding-inline-start: 2rem;
  }

  .job-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

@media (max-width: 50rem) {
  .cv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "identity"
      "main"
      "skills"
      "footer";
    max-inline-size: 44rem;
  }

  .profile-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
    gap: 0 1.25rem;
    margin-block-end: 2rem;
  }

  .portrait {
    inline-size: 96px;
    block-size: 96px;
    margin: 0;
  }

  .contact {
    align-self: center;
    font-size: 0.8125rem;
  }

  .contact .sidebar-heading {
    margin-block-end: 0.3rem;
  }

  .section-nav {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-block-start: 1.25rem;
  }

  main {
    padding: 0;
    border: 0;
  }

  h1 {
    font-size: clamp(2.15rem, 6.5vw, 2.75rem);
  }

  .job-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .skills {
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
  }

  .skill-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .skill-group + .skill-group {
    margin: 0;
  }

  .languages ul {
    max-inline-size: 14rem;
  }
}

@media (max-width: 35rem) {
  .cv {
    inline-size: 100%;
    margin: 0;
    padding: 1.65rem 1.15rem;
    border: 0;
    border-block-start: 3px solid var(--accent);
    box-shadow: none;
  }

  .job-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline {
    padding-inline-start: 1rem;
  }

  .job::before {
    inset-inline-start: calc(-1rem - 0.29rem);
  }

  .skill-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.3rem;
  }

  .skill-group ul {
    max-inline-size: 28rem;
  }
}

@page {
  size: A4;
  margin: 13mm;
}

@media print {
  :root {
    --paper: #fff;
    --ink: #111;
    --muted: #444;
    --accent: #23493e;
    --line: #bbc4bc;
  }

  html,
  body {
    background: #fff;
    font-size: 9.5pt;
    line-height: 1.4;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .cv {
    display: block;
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 9.5pt;
  }

  .skip-link,
  .portrait,
  .section-nav,
  .page-footer,
  .eyebrow,
  .contact .sidebar-heading {
    display: none;
  }

  .profile-card {
    display: block;
    float: right;
    inline-size: 54mm;
    margin: 0 0 4mm 5mm;
  }

  .contact {
    font-size: 8.5pt;
    text-align: right;
  }

  .contact address {
    gap: 0.5mm;
  }

  main {
    padding: 0;
    border: 0;
  }

  h1 {
    font-size: 27pt;
  }

  .headline {
    margin: 1.5mm 0 3mm;
    font-size: 11pt;
  }

  .profile {
    max-inline-size: none;
    font-size: 9.5pt;
  }

  .main-section {
    clear: both;
    margin-block-start: 5mm;
  }

  .section-heading {
    margin-block-end: 3.5mm;
    padding-block-end: 1.5mm;
    font-size: 12pt;
  }

  .timeline {
    margin-inline-start: 1.5mm;
    padding-inline-start: 4mm;
  }

  .job::before {
    inset-inline-start: calc(-4mm - 0.29rem);
  }

  .job-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .job h3 {
    font-size: 10.5pt;
  }

  .job-title,
  .period,
  .client {
    font-size: 8.5pt;
  }

  .job + .job {
    margin-block-start: 5mm;
  }

  .project {
    margin-block-start: 3.5mm;
    break-inside: avoid;
  }

  .project h4,
  .education-list h3 {
    margin-block-end: 1mm;
    font-size: 9.5pt;
  }

  .project-stage {
    font-size: 7pt;
  }

  details,
  details[open] {
    margin-block-start: 1mm;
    padding: 0;
    border: 0;
    background: none;
  }

  summary {
    display: none;
  }

  /* Print the technical detail even when its on-screen disclosure is closed. */
  details::details-content {
    display: block;
    block-size: auto;
    content-visibility: visible;
  }

  details > .detail-body {
    display: block;
    padding: 0;
    font-size: 9pt;
  }

  .detail-body li + li {
    margin-block-start: 0.6mm;
  }

  .job-summary {
    margin-block-start: 1.5mm;
  }

  h2,
  h3,
  h4,
  .job-heading,
  .job-title,
  .client {
    break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  .education-list > li,
  .skill-group,
  .languages {
    break-inside: avoid;
  }

  .education-list > li + li {
    margin-block-start: 3mm;
  }

  .education-list p,
  .education-list time,
  .training {
    font-size: 8.5pt;
  }

  .training {
    margin-block-start: 3mm;
  }

  .skills {
    display: block;
    margin-block-start: 5mm;
    padding-block-start: 3mm;
    border-block-start: 1px solid var(--line);
  }

  .sidebar-heading {
    margin-block-end: 2mm;
    font-size: 8pt;
  }

  .skill-groups {
    display: block;
  }

  .skill-group + .skill-group {
    margin-block-start: 1.5mm;
  }

  .skill-group h3,
  .skill-group ul,
  .skill-group li,
  .languages li {
    display: inline;
  }

  .skill-group h3::after {
    content: ": ";
  }

  .skill-group li:not(:last-child)::after,
  .languages li:not(:last-child)::after {
    content: "; ";
  }

  .languages {
    margin-block-start: 3mm;
  }

  .languages span::before {
    content: " - ";
  }

  .languages ul {
    max-inline-size: none;
  }

  .skill-group h3,
  .skill-group ul,
  .languages ul {
    font-size: 8pt;
    line-height: 1.6;
  }
}