/* The résumé sheet (assets/resume/resume.html), shared by the in-room viewer and LiuOS.
   Sizes are LaTeX points scaled to the page: 612pt = the sheet's width (8.5in), so whoever shows it
   wraps it in an element with container-type: inline-size, and widening that element zooms the text. */

/* Computer Modern, the LaTeX font (declared here because the package's own CSS uses an invalid font-style). */
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-500-roman.ttf") format("truetype"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-500-italic.ttf") format("truetype"); }
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-700-roman.ttf") format("truetype"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-700-italic.ttf") format("truetype"); }

.resume-sheet {
  --pt: calc(100cqw / 612);
  min-height: calc(792 * var(--pt)); /* letter paper: 11in tall */
  padding: calc(36 * var(--pt));    /* 0.5in margins */
  background: #fff; color: #000;
  font: 400 calc(11 * var(--pt)) / 1.236 "CMU Serif", "Latin Modern Roman", "Times New Roman", serif;
}
.resume-sheet a { color: inherit; text-decoration: underline; text-decoration-thickness: calc(.4 * var(--pt)); text-underline-offset: calc(2 * var(--pt)); }
.resume-sheet a.r-quiet { text-decoration: none; } /* \href with hidelinks: clickable but looks like plain text */
.r-sep { font-weight: 400; font-style: normal; }

/* Heading: \textbf{\Huge \scshape Nathan Liu} and the \small contact line */
.r-heading { text-align: center; }
/* Computer Modern has no bold small caps, so LaTeX prints \scshape in bold as plain bold. Match that. */
/* font-family and letter-spacing are reset because pages may style every h1 (the room sets Georgia). */
.r-heading h1 { margin: 0; font-family: inherit; font-size: calc(24.88 * var(--pt)); line-height: 1.2; font-weight: 700; letter-spacing: normal; }
.r-heading p { margin: calc(1 * var(--pt)) 0 0; font-size: calc(10 * var(--pt)); line-height: 1.2; }

/* \section: \large \scshape with a rule underneath */
.resume-sheet h2 {
  margin: calc(10 * var(--pt)) 0 calc(4 * var(--pt));
  padding-bottom: calc(1 * var(--pt));
  border-bottom: calc(.4 * var(--pt)) solid #000;
  font-size: calc(12 * var(--pt)); font-weight: 400; font-variant: small-caps; line-height: 1.2;
}

/* \resumeSubheading: indented 0.15in, rows 0.97\textwidth wide, right column flush right */
.r-entry { padding-left: calc(10.8 * var(--pt)); margin-bottom: calc(3 * var(--pt)); }
.r-row { display: flex; justify-content: space-between; gap: calc(8 * var(--pt)); width: calc(523.8 * var(--pt)); max-width: 100%; }
.r-row.r-sub { font-size: calc(10 * var(--pt)); line-height: 1.2; }
.r-project .r-row > span:first-child { font-size: calc(10 * var(--pt)); } /* \small#1 in \resumeProjectHeading */
.r-edu { margin-bottom: 0; }
.r-small { margin: calc(2 * var(--pt)) 0 0; font-size: calc(10 * var(--pt)); line-height: 1.2; }

/* \resumeItem lists: \small text with a tiny bullet */
.resume-sheet ul { list-style: none; margin: calc(1 * var(--pt)) 0 calc(1 * var(--pt)); padding-left: calc(17 * var(--pt)); }
.resume-sheet li { position: relative; font-size: calc(10 * var(--pt)); line-height: 1.2; margin-bottom: calc(.5 * var(--pt)); }
.resume-sheet li::before { content: "•"; position: absolute; left: calc(-9 * var(--pt)); font-size: calc(9 * var(--pt)); }

/* Technical skills */
.r-skills { margin: 0; padding-left: calc(10.8 * var(--pt)); font-size: calc(10 * var(--pt)); line-height: 1.2; }

/* Narrow screens (phones): an exact copy would shrink the text to ~7px, so keep the styling but use
   readable sizes and let lines rewrap. --r-zoom lets LiuOS make this text bigger or smaller.
   Add .r-exact to the sheet to keep the exact page at any width (LiuOS does when it has room). */
@container (max-width: 560px) {
  .resume-sheet:not(.r-exact) { --pt: calc(1.25px * var(--r-zoom, 1)); min-height: 0; padding: 18px 16px; overflow-wrap: break-word; }
  /* A date that fits stays flush right; one that wraps sits under the heading on the left, like a second line. */
  .resume-sheet:not(.r-exact) .r-row { flex-wrap: wrap; width: auto; column-gap: calc(8 * var(--pt)); row-gap: 0; }
}