/* ==========================================================================
   Design tokens — mirrored into the Claude Design design-system project.
   Change values here; design-system/ previews import this same file.
   ========================================================================== */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.833rem;   /* dates, meta */
  --step-0:  1rem;       /* body */
  --step-1:  1.25rem;    /* role titles */
  --step-2:  1.563rem;   /* section headings */
  --step-3:  clamp(2rem, 1.4rem + 2.4vw, 2.75rem);  /* name */

  --leading-tight: 1.25;
  --leading-body:  1.6;

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;

  --measure: 46rem;

  --bg:         #fdfdfc;
  --surface:    #f5f5f3;
  --text:       #1a1a18;
  --text-muted: #55554f;
  --accent:     #1b4d3e;
  --rule:       #e0e0da;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #16161a;
    --surface:    #1e1e23;
    --text:       #eeeeec;
    --text-muted: #a8a8a2;
    --accent:     #7dd3b0;
    --rule:       #2e2e35;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
html { -webkit-text-size-adjust: 100%; }

/* ==========================================================================
   Layout
   ========================================================================== */

body.page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.masthead { margin-bottom: var(--space-7); }
.masthead__name {
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.masthead__title { font-size: var(--step-1); color: var(--text-muted); }
.masthead__contact {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4); font-size: var(--step--1);
}

.section { margin-bottom: var(--space-7); }
.section__heading {
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}

.role { margin-bottom: var(--space-6); }
.role__org   { font-size: var(--step-1); line-height: var(--leading-tight); }
.role__title { color: var(--text-muted); }
.role__dates { font-size: var(--step--1); color: var(--text-muted); }
.role__bullets { margin-top: var(--space-3); }
.role__bullets li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}
.role__bullets li::before {
  content: "";
  position: absolute; left: 0; top: 0.65em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.role > p { margin-top: var(--space-3); }

.skills__group { margin-bottom: var(--space-4); }
.skills__label {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.skills__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.skills__items li {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--text);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
}

@media (min-width: 40rem) {
  .role__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--space-4);
  }
  .role__org   { grid-column: 1; }
  .role__title { grid-column: 1; }
  .role__dates { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  :root {
    --bg: #ffffff; --surface: #ffffff;
    --text: #000000; --text-muted: #333333;
    --accent: #000000; --rule: #cccccc;

    /* Screen spacing tokens are tuned for scrolling, not paper — tighten the
       larger steps so 5 roles, 2 projects, 31 skills, and education fit in
       2 pages. Also drop the name size: --step-3's clamp() targets viewport
       width, which reads oversized against a fixed Letter page. */
    --step-3: 1.9rem;
    --space-2: 0.35rem;
    --space-3: 0.5rem;
    --space-4: 0.5rem;
    --space-5: 0.6rem;
    --space-6: 0.65rem;
    --space-7: 0.85rem;
    --space-8: 1rem;
  }

  body.page {
    max-width: none;
    padding: 0;
    font-size: 10.5pt;
    line-height: 1.3;
  }

  a { text-decoration: none; }
  /* Expose destinations that are otherwise lost on paper, but not for
     mailto: or in-page anchors, where the visible text is already the target. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: var(--text-muted);
    word-break: break-all;
  }

  /* .section is deliberately excluded here: Experience alone (5 roles) runs
     ~970px, under one page's usable height, so break-inside:avoid on the
     whole section pushed it entirely onto a fresh page rather than letting
     it start filling the space left on page 1 — the actual defect that blew
     the page count out. Keeping it scoped to .role avoids splitting a single
     role's bullets across a boundary, which is the split worth avoiding. */
  .role { break-inside: avoid; }
  .section__heading { break-after: avoid; }
  /* Narrow replacement for the protection .section used to give the four
     Skills sub-headings by accident: without this, a page boundary can land
     between a .skills__label (e.g. "Tools and Platforms") and its own
     .skills__items list. Heading-to-list adjacency only — does not
     reintroduce break-inside on .skills__group or .section. */
  .skills__label { break-after: avoid; }

  .masthead__contact a[href$=".pdf"] { display: none; }

  /* Flatten skill chips for print: a grid of bordered boxes is wasteful and
     ugly on paper. Fall back to an inline list separated by a middle dot;
     :not(:last-child) keeps the last item in each group from getting a
     dangling trailing separator. */
  .skills__items {
    display: block;
  }
  .skills__items li {
    display: inline;
    background: none;
    border: none;
    padding: 0;
  }
  .skills__items li:not(:last-child)::after {
    content: " · ";
    color: var(--text-muted);
  }
}