:root {
  color-scheme: dark;
  --bg: #171613; /* keep in sync with <meta name="theme-color"> in index.html */
  --ink: #e7e3db;
  --muted: #9b948a;
  --rule: #383530;
  --dash: #6e6961;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--ink); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
::selection { background: #34302a; }

main {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(56px, 14vw, 120px) 20px clamp(72px, 18vw, 160px);
  display: grid;
  gap: clamp(48px, 10vw, 72px);
}

header { display: grid; gap: 14px; }
h1 { font-size: 20px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; }
.tagline { color: var(--muted); max-width: 46ch; text-wrap: pretty; }
nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; color: var(--muted); }

.experience, #experience-list { display: grid; gap: clamp(36px, 8vw, 56px); }
.section-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.company { display: grid; gap: 32px; }

/* A hairline separates adjacent companies; spacing alone read as too weak a
   boundary when the company and role titles were the same size. */
.company + .company { border-top: 1px solid var(--rule); padding-top: 20px; }

.company-header, .role-header { display: grid; gap: 2px; }
.company-header h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.role-header h4 { font-size: 16px; font-weight: 500; line-height: 1.3; }
.company-header p, .role-header p { color: var(--muted); font-size: 15px; line-height: 1.4; }

.role { display: grid; gap: 14px; }
.role p { text-wrap: pretty; }
.role ul { padding: 0; list-style: none; display: grid; gap: 14px; }
.role li { display: grid; grid-template-columns: 18px minmax(0, 1fr); text-wrap: pretty; }
/* the dash is presentation, so it lives here rather than in the DOM */
.role li::before { content: "—"; color: var(--dash); }

@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --ink: #1a1a19;
    --muted: #55514d;
    --rule: #c9c4bd;
    --dash: #8a847c;
  }
  a { border-bottom: none; }
  @page { margin: 0.9in; }
}

@media (min-width: 480px) {
  main { padding-left: 32px; padding-right: 32px; }
}

/* Desktop: tighten the vertical rhythm so the page is shorter. */
@media (min-width: 900px) {
  main {
    padding-top: clamp(48px, 6vh, 72px);
    padding-bottom: clamp(48px, 6vh, 72px);
    gap: 56px;
  }
  .experience { gap: 36px; }
  #experience-list { gap: 44px; }
  .company { gap: 26px; }
  .role { gap: 12px; }
  .role ul { gap: 12px; }
}