/* Resume page. Print-first: light, black-on-white, sized for US Letter.
   On screen the page is shown as a sheet of paper on the site's dark background. */

/* IBM Plex Sans, vendored so the PDF looks the same on any machine. SIL Open Font License.
   Files are from https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@5.1.0/files/ (latin subset). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
/* IBM Plex Mono, same source (@fontsource/ibm-plex-mono@5.1.0), for the skills table's date column. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --ink: #111;
  --muted: #555;
  --accent: #3a0028;          /* the site's card color, as a print-safe accent */
  --rule: #c9bcc4;
  --page-bg: #141010;         /* matches css/site.css --bg */
  --link: #55ff55;
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;
}

/* Top margin is 0 so the browser has no room to print its header (date + title); the 0.5in comes back
   as .paper padding in print, cloned onto every page. The footer (URL + page number) still fits below. */
@page { size: Letter; margin: 0 0.6in 0.5in; }

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

html { font-size: 10.5pt; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.3;
}

/* ---------- screen chrome ---------- */

.toolbar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: 11pt;
}
.toolbar a { color: var(--link); text-decoration: none; }
.toolbar a:hover { text-decoration: underline; }
.toolbar button {
  padding: 0.3rem 0.8rem;
  background: transparent;
  color: var(--link);
  border: 1px solid var(--link);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

.warnings {
  max-width: 8.5in;
  margin: 0 auto 1rem;
  padding: 0.75rem 1rem;
  background: #fff3cd;
  color: #5c4500;
  border: 1px solid #e0c060;
  border-radius: 4px;
}
.warnings ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

.paper {
  width: 8.5in;
  max-width: 100%;
  /* --pages is set by fit(): 10in of content per Letter page, plus the 0.5in top/bottom padding. */
  min-height: calc(var(--pages, 1) * 10in + 1in);
  margin: 0 auto 3rem;
  padding: 0.5in 0.6in;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
/* On screen, mark where the printed pages break. */
.paper.multipage {
  /* Second layer is the white sheet itself, so clipping the guide lines doesn't clip the paper. */
  background-image: linear-gradient(to bottom, transparent calc(10in - 1px), #ccc calc(10in - 1px)), linear-gradient(#fff, #fff);
  background-size: 100% 10in, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .paper { width: auto; min-height: 0; margin: 0; padding: 0.5in 0 0; box-decoration-break: clone; box-shadow: none; background-image: none !important; }
  a { color: inherit; text-decoration: none; }
}

@media screen and (max-width: 8.5in) {   /* "screen": the 7.3in print area would match too */
  .paper { padding: 0.35in 16px; min-height: 0; }
}

/* ---------- resume content ---------- */

/* Header: name + about line on the left, contact methods as a label/value table on the right. */
.resume-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.resume-header h1 { margin: 0; font-size: 20pt; font-weight: 600; letter-spacing: 0.02em; line-height: 1.15; }
.headline { margin: 0.1rem 0 0; font-size: 11.5pt; }   /* one-line role summary under the name (basics.headline) */
.contact { margin: 0.15rem 0 0; color: var(--muted); }
.contact a { color: inherit; }
.about > span + span::before { content: "\00b7"; margin: 0 0.6em; }
.reach {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.6em;
  align-items: baseline;
  margin: 0;
  color: var(--ink);
}
.contact-label {
  justify-self: end;
  color: var(--accent);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media screen and (max-width: 8.5in) {
  .resume-header { flex-direction: column; align-items: flex-start; }
}

/* --gap is set by fit() in resume.js: the extra space handed out to fill the last page. */
.block { margin-top: calc(0.7rem + 1.5 * var(--gap, 0px)); }
.block.pinned { break-inside: avoid; }
.block h2 {
  margin: 0 0 0.3rem;
  padding-bottom: 0.1rem;
  color: var(--accent);
  font-size: 11pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  break-after: avoid;
}

.entry { margin: 0; break-inside: avoid; }
.entry + .entry { margin-top: calc(0.45rem + var(--gap, 0px)); }
.entry-head { display: flex; justify-content: space-between; gap: 1rem; break-after: avoid; }
.entry-head .when { flex: none; color: var(--muted); font-family: var(--mono); font-size: 0.9em; }

.group { margin: 0.2rem 0 0 0.6rem; font-style: italic; break-after: avoid; }

.items { margin: 0.1rem 0 0; padding-left: 1.5rem; }
.items li { margin: 0.1rem 0; break-inside: avoid; }
.items li.topic { list-style: none; margin-left: -0.6rem; }
.items ul { margin: 0.05rem 0; padding-left: 1.2rem; list-style: circle; }

.pub { margin: 0 0 0.35rem 0.6rem; break-inside: avoid; }
.pub-title { font-weight: 600; }
.pub-title ~ div { margin-left: 1rem; }   /* authors + venue tucked under the title, like bullets under a job */
/* My name in the author list (the section's `me`): accent-colored, so it stands out without competing
   with the black bold title. */
.pub-title ~ div strong { font-weight: 600; color: var(--accent); white-space: nowrap; }
.pub .venue { color: var(--muted); }

.skills { width: 100%; border-collapse: collapse; margin-left: 0.6rem; width: calc(100% - 0.6rem); }
.skills th { text-align: left; font-weight: 600; border-bottom: 1px solid var(--rule); }
.skills th, .skills td { padding: 0.05rem 0.4rem 0.05rem 0; }
.skills .num { text-align: center; }
.skills th:nth-child(3) { text-align: center; }
/* Dates and years are set in mono everywhere: here and in the job/degree date column (.when). */
.skills td:nth-child(2), .skills td.num { font-family: var(--mono); font-size: 0.9em; }