/* Resume page only (resources/resume/index.html). Loads after custom-navbar.css
   and styles.css and reuses their tokens and base typography; this layer adds
   the masthead, the two-sided entry row, the section rules and the print sheet.
   The navbar is the root pages' own and takes nothing from here but print.

   Type: each face is spent exactly once, so two similar 18px lines are telling
   you something true — Source Serif names a place you were, Palatino a work
   you made.

     Fraunces (display)  the name, and nothing else
     Source Serif        section labels, institutions, roles, prose
     Palatino            publication titles only

   Measure: 60rem, wider than prose. The rows are two-sided (role left, dates
   right) and each must fit one line. At 47rem the longest ("Graduate Research
   Assistant · Advisors: …") wrapped and pushed its date onto its own line,
   which reads as a different entry. Stays inside Bootstrap's 1140px container. */
.resume-page {
  max-width: 60rem;
  margin: 0 auto;
}

/* --- Masthead --- */
/* The page's first entry, not a title above it: name left, where to find it
   right — the same two-sided row every entry below is set in. Baseline (not
   centre) alignment makes the 36px name and 15px links read as one line. No
   bottom rule: the first section's top rule closes it. */
.resume-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 3.25rem;
  padding-bottom: 2rem;
}

.resume-masthead h1 {
  margin: 0;
}

/* The masthead's aside, so it takes the aside's size and ink. Separators sit a
   tier below the links they divide, like .pub-links and its brackets; the mark
   is "·", matching the clause separator inside .resume-what. */
.resume-contact {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: right;
}

/* nowrap: the line breaks between items, never inside an address. */
.resume-contact a:link,
.resume-contact a:visited {
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.resume-contact a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
}

.resume-sep {
  margin: 0 0.5em;
}

/* --- The résumé as a file --- */
/* A control, not a link. Every other item on the line is somewhere else to
   find the author; this one hands you the same document in another format, so
   it is set as a filled plate you press rather than a name you follow, last in
   the line and outside the "·" list — the gap does the separating. An
   outlined label still reads as text.

   The fill is a 9% wash of --accent, NOT --accent-bg: that token on this
   page's #faf9f5 is ~1.02:1 and the plate simply never appears. Ink stays
   --text-primary, so the accent still never colours a glyph. --radius-md, not
   --radius-sm: 3px on a 30px plate reads as a hairline box.

   Every rule carries the .resume-contact prefix to outrank the generic link
   rules above, which would otherwise recolour and underline the label. */
.resume-contact a.resume-pdf:link,
.resume-contact a.resume-pdf:visited {
  display: inline-block;
  margin-left: 1.15rem;
  padding: 0.34em 0.78em;
  border-radius: var(--radius-md);
  /* Flat fallback first for anything without color-mix. */
  background-color: #fdf1e4;
  background-color: color-mix(in srgb, var(--accent) 9%, var(--ivory-light));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}

/* A page with its corner turned. Sized in em to track the label; nudged off
   the baseline so its optical centre sits on the x-height. */
.resume-pdf-mark {
  width: 0.82em;
  height: 0.94em;
  margin-right: 0.46em;
  vertical-align: -0.11em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

/* Hover deepens the wash and draws the ring with an inset box-shadow, not a
   border — a border would reflow the whole contact line on every hover. */
.resume-contact a.resume-pdf:hover {
  background-color: #fce7d2;
  background-color: color-mix(in srgb, var(--accent) 16%, var(--ivory-light));
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text-primary);
  text-decoration: none;
}

.resume-contact a.resume-pdf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Sections --- */
/* A hairline opens each section instead of an <hr> under each header: the rule
   lands where the meaning changes, not between a header and its entries. */
.resume-page .page-section {
  margin-top: 0;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid var(--ivory-dark);
}

/* Section headers are wayfinding, not content: at 27px display they outranked
   the institutions, inverted for a document scanned by employer and school. So
   they take the site's eyebrow, as the nav labels do (.nav-section). */
.resume-page .section-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 1.15rem;
}

/* --- Entries --- */
.resume-entry,
.resume-pub {
  margin-bottom: 1.35rem;
}

.resume-entry:last-child,
.resume-pub:last-child {
  margin-bottom: 0;
}

/* Title left, place/date right — the row this page is built from. Baseline
   alignment keeps the date on the title's line at a different size. */
.resume-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.resume-row + .resume-row {
  margin-top: 0.15rem;
}

/* Source Serif, not Fraunces (spent on the name — see the type note above). It
   also sets narrower, which buys the two-sided rows room before they wrap. */
.resume-where {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* A linked lab name is dressed as the text it sits in: an accent rule under
   half the landmark line would demote it to link text and unbalance linked
   rows against unlinked ones. Hover draws the underline back — the contact
   line's grammar, quiet at rest. */
.resume-where a:link,
.resume-where a:visited {
  color: var(--text-primary);
  text-decoration: none;
}

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

/* Role / degree line: italic, one tier down, as the PDF sets it. */
.resume-what {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Right rail — city on the title row, dates on the role row. nowrap because
   "Aug. 2025 – Present" broken across two lines reads as two dates. */
.resume-aside {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}
/* Font Style (root styles.css): dates in tabular figures. */
[data-style="editorial"] .resume-aside { font-variant-numeric: lining-nums tabular-nums; }

/* Dashes rather than discs, matching the PDF. */
.resume-bullets {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.resume-bullets li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

.resume-bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}

/* --- Publications --- */
/* Reuses the .pub-* classes from styles.css, Palatino and all, so the papers
   hold one face on every page that lists them. Only the spacing changes: those
   margins are tuned for a row beside a thumbnail, and here entries stack. */
.resume-pub .pub-title {
  margin-top: 0;
}

.resume-pub .pub-venue {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

/* --- Flat lists (awards, service) --- */
.resume-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-list > li {
  margin-bottom: 0.5rem;
}

.resume-list > li:last-child {
  margin-bottom: 0;
}

.resume-item-name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.resume-note {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* No entrance on the masthead, by decision — see the section reveal in
   styles.css. The entrance starts at Education. */

/* --- Narrow --- */
/* Under 768px the container is ≤540px, which the name and the contact line
   can no longer share: the masthead stacks and both sides go left. */
@media screen and (max-width: 767px) {
  .resume-masthead {
    display: block;
    padding-top: 2.5rem;
  }

  .resume-contact {
    margin-top: 0.6rem;
    text-align: left;
  }

  /* Stacked, the plate's left margin only indents a wrapped line, so it takes
     its own row flush with the links. */
  .resume-contact a.resume-pdf:link,
  .resume-contact a.resume-pdf:visited {
    display: block;
    width: fit-content;
    margin: 0.85rem 0 0;
  }
}

/* Phones: the right rail has nowhere to go on a 320px line, and an aside on
   its own line read as stray body text (a bare "2025" under an award). So the
   row degrades into the page's clause form: the aside joins its line behind a
   "·", marked as the aside by its smaller tertiary ink. The dot is on the
   aside's ::before, inside its nowrap, so a wrapping date carries its
   separator with it. */
@media screen and (max-width: 575px) {
  .resume-row {
    display: block;
  }

  .resume-aside::before {
    content: "· ";
  }
}

/* --- Print --- */
/* Cmd-P should produce the résumé, not a screenshot of a website: drop the
   chrome, flatten the background, keep entries whole across page breaks. The
   section rules stay — they are the document's structure. */
@media print {
  /* .resume-pdf is chrome here: on paper you are already holding the PDF.
     The navbar is chrome too, and the star chips are a live web count, not
     résumé content. The PDF selectors repeat :link/:visited to outrank the
     control's own display rule; without them it printed. */
  .navbar,
  .site-footer,
  .resume-contact a.resume-pdf:link,
  .resume-contact a.resume-pdf:visited,
  .pub-links a.pub-stars.is-ready {
    display: none;
  }

  body {
    background: #fff;
    font-size: 10.5pt;
    line-height: 1.4;
  }

  .resume-page {
    max-width: none;
  }

  .resume-masthead {
    padding-top: 0;
    padding-bottom: 1.2rem;
  }

  .resume-page .page-section {
    padding: 1rem 0 1.2rem;
  }

  .resume-entry,
  .resume-pub,
  .resume-list > li {
    break-inside: avoid;
  }

  a:link,
  a:visited {
    text-decoration: none;
  }
}