:root {
  color-scheme: light dark;
  --paper: #fafaf7;
  --ink: #1f2521;
  --muted: #525c54;
  --accent: #285b48;
  --rule: #d5dad3;
  font-family: system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171c19;
    --ink: #e7ebe6;
    --muted: #adb8ae;
    --accent: #a0d7bb;
    --rule: #38443c;
  }
}

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

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

p, h1, h2, h3, h4, ul, dl, dd { margin: 0; }

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

a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.shell { width: min(56rem, calc(100% - 3rem)); margin-inline: auto; }

.topbar {
  min-height: 4.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  font-size: .9rem;
}

.topbar nav { display: flex; gap: 1.5rem; }

.topbar a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
}

.topbar a:hover, .topbar a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
}

.topbar .wordmark { color: var(--ink); font-weight: 650; }

main { padding-bottom: 5rem; }

.intro { padding-block: clamp(3.25rem, 8vw, 5.5rem) 3.5rem; }

.role, .date, .details dt {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .84rem;
}

.role { margin-bottom: .65rem; color: var(--accent); font-weight: 650; }

h1 {
  max-width: 100%;
  font-size: clamp(2.2rem, 6.9vw, 4.65rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.summary {
  max-width: 35rem;
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: var(--muted);
}

.contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.4rem;
  padding: 0;
  margin-top: 1.15rem;
  list-style: none;
  color: var(--muted);
  font-size: .9rem;
}

.contacts a { display: inline-block; padding-block: .3rem; }
.print-only { display: none; }

.resume-section {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1fr) minmax(0, 3fr);
  gap: 1.75rem;
  padding-block: 1.9rem 2.3rem;
  border-top: 1px solid var(--rule);
}

.resume-section h2 { font-size: 1.12rem; line-height: 1.45; letter-spacing: -.015em; }
.employer + .employer { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.employer h3 { font-size: 1.32rem; line-height: 1.3; letter-spacing: -.025em; }
.position { margin-top: 1.2rem; }
.position + .position { margin-top: 1.7rem; }
.date { color: var(--muted); }
.position h4 { margin-top: .12rem; margin-bottom: .4rem; font-size: 1rem; }
.position ul { margin-top: .42rem; padding-left: 1.12rem; }
.position li + li { margin-top: .32rem; }
.position li::marker { color: var(--accent); }

.details { display: grid; gap: .85rem; }
.details > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .25rem 1rem; }
.details dt { color: var(--muted); padding-top: .15rem; }
.details strong { font-weight: 620; }

.project-intro { padding-bottom: 2.25rem; }
.projects { padding: 0; list-style: none; }
.projects li { padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--rule); }
.projects h2 { font-size: 1.3rem; font-weight: 650; }
.projects h2 a { text-decoration: none; }
.projects h2 a:hover { text-decoration: underline; }
.projects h2 span { font-size: .85em; margin-left: .12em; }
.projects p { max-width: 36rem; margin-top: .3rem; color: var(--muted); }

@media (max-width: 42rem) {
  .resume-section { grid-template-columns: 1fr; gap: .9rem; }
}

@media (max-width: 30rem) {
  .shell { width: calc(100% - 2rem); }
  .topbar nav { gap: 1rem; }
  .intro { padding-bottom: 2.25rem; }
  .details > div { grid-template-columns: 1fr; gap: .1rem; }
}

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

@media print {
  :root {
    color-scheme: light;
    --paper: #fff;
    --ink: #191e1a;
    --muted: #414c43;
    --accent: #285b48;
  }

  body { font: 11pt/1.4 Arial, sans-serif; }
  .topbar, .screen-only { display: none; }
  .print-only { display: list-item; }
  .shell { width: 100%; }
  main { padding-bottom: 0; }
  .intro { padding: 0 0 4mm; }
  .role { margin-bottom: 1mm; font-size: 10pt; }
  h1 { font-size: 29pt; }
  .summary { max-width: none; margin-top: 2.2mm; font-size: 11pt; }
  .contacts { margin-top: 2mm; gap: 3mm; font-size: 9pt; }
  .contacts a { padding: 0; }
  .resume-section { display: block; padding-block: 3.5mm; }
  .resume-section h2 { margin-bottom: 2.5mm; font-size: 13pt; }
  .employer h3 { font-size: 11.5pt; }
  .employer + .employer { margin-top: 4mm; padding-top: 3mm; }
  .position { margin-top: 2.5mm; }
  .position + .position { margin-top: 3mm; }
  .position, .details > div { break-inside: avoid; }
  .position.print-page-two { break-before: page; margin-top: 0; }
  .continuation { display: block; margin-bottom: 2.5mm; font-size: 11.5pt; font-weight: 700; }
  .date, .details dt { font-family: inherit; }
  .position h4 { font-size: 10.5pt; margin-block: .6mm 1mm; }
  .position ul { margin-top: 1mm; }
  .position li + li { margin-top: .6mm; }
  .details { gap: 1.5mm; }
  .details > div { grid-template-columns: 29mm minmax(0, 1fr); }
  .date, .details dt { font-size: 8.5pt; }
  h2, h3 { break-after: avoid; }
}