/* ============================================================================
   billylinn.com — resume documents
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css, which owns every token and every reusable class:

     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="/resume.css">

   One stylesheet for every resume on the site — the general one at /resume/
   and each tailored copy at /for/<slug>/resume/. Tailored resumes change the
   words, never the markup: keep the class names below and the print rules keep
   working.

   Markup skeleton (see /resume/index.html for the full worked version):

     <div class="page resume-doc">
       <div class="resume-bar">…back link + .btn download…</div>
       <main class="container container--narrow resume">
         <header class="resume-header">
           <h1 class="resume-name">…</h1>
           <p class="resume-tagline">…</p>
           <address class="resume-contact">…</address>
         </header>
         <section class="resume-section">
           <h2 class="section-title">…</h2>
           …
         </section>
       </main>
       <footer class="site-footer">…</footer>
     </div>

   Section bodies:
     .resume-summary > p × 2–3   (short lines, not a paragraph; the first is
                                  set a step larger as the lede)
     .skills-grid  > .skill-row  > .skill-label + .skill-value
                                  (one row per group, ~8 items each, no
                                   parenthetical explanations — these rows are
                                   a table to be scanned, not prose to be read)
     .jobs         > .job        > .job-header (.job-title > .job-company +
                                   .job-role, .job-dates) + .job-location +
                                   ul.job-bullets > li   (one <li> per bullet,
                                   3–5 per job, one idea each, ≤ 2 lines, with
                                   <strong> only on the opening phrase)
     .project-grid > .project    > .project-name (> .project-role) + p +
                                   ul.tags > li.tag   (one sentence, ≤ 5 tags)
     .edu-row      > div > .edu-school (> .edu-degree) + .edu-location,
                     .edu-dates

   Type: the document reads in Archivo. A resume is scanned in fragments rather
   than read in sentences, and a grotesque holds up at small sizes and short
   line lengths where a text serif goes grey. Newsreader keeps the two things
   that are voice rather than data — the name and the section headings — which
   is also what ties the page to the landing page's letterhead.

   Hierarchy, loudest first: name → section heading → company and title →
   bullet → date, location, tag. Anything that has to be read is --ink or
   --ink-soft; --muted is only for dates, locations, and tags.
   ========================================================================= */

/* ── Document scale ─────────────────────────────────────────────────────────
   Everything sized from these vars, so the print block can compress the whole
   document by re-pointing them instead of hunting through rules. */

.resume-doc {
  /* A resume column is a shade wider than the site's prose measure: it has to
     carry two-up grids without the cells going narrow. */
  --max-width-narrow: 48rem;

  --rs-name: clamp(1.9rem, 1.35rem + 2.3vw, 2.5rem);
  --rs-tagline: 0.875rem;    /* 14px — the positioning line under the name */
  --rs-heading: 1.25rem;     /* the serif section heading */
  --rs-title: 1.0625rem;     /* 17px — employer + role, loudest line in a job */
  --rs-body: 0.96875rem;     /* 15.5px — bullets, project copy, the summary */
  --rs-lede: 1.0625rem;      /* the first line of the summary */
  --rs-small: 0.8125rem;     /* dates, locations, contact block */
  --rs-tag: 0.6875rem;

  --rs-leading: 1.55;
  --rs-section-gap: var(--space-7);
  --rs-item-gap: var(--space-5);
}

/* ── Top bar (screen only) ──────────────────────────────────────────────── */

.resume-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.resume-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
.resume-bar .btn {
  padding: 0.42rem 0.9rem;
  font-size: var(--text-sm);
}
.resume-back {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.resume-back:hover { color: var(--ink); }

/* ── Document ───────────────────────────────────────────────────────────── */

.resume {
  padding-block: var(--space-7) 0;
  font-family: var(--font-sans);
  font-size: var(--rs-body);
  line-height: var(--rs-leading);
  color: var(--ink);
}

/* Header — name and tagline left, contact right, closed by a heavy hairline
   that matches the landing page's masthead rule. */
.resume-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule-strong);
}

.resume-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--rs-name);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.026em;
  color: var(--ink);
}

.resume-tagline {
  margin: var(--space-2) 0 0;
  max-width: 34rem;
  font-size: var(--rs-tagline);
  line-height: 1.5;
  color: var(--ink-soft);
}

.resume-contact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: var(--rs-small);
  font-style: normal;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}
.resume-contact a {
  color: var(--muted);
  text-decoration-color: var(--rule-strong);
}
.resume-contact a:hover { color: var(--accent); }

@media (min-width: 34rem) {
  .resume-contact { text-align: right; }
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.resume-section { margin-top: var(--rs-section-gap); }

/* The section heading. Set in the serif at a size that can be found from
   across the room — a resume is navigated by these before it is read. */
.section-title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-serif);
  font-size: var(--rs-heading);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--ink);
}

/* Summary — a few short statements, not a paragraph. The block carries the one
   rule of colour in the document. */
.resume-summary {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
}
.resume-summary p {
  margin: 0;
  max-width: 40rem;
  color: var(--ink);
}
/* The lede is only a lede when something follows it: a summary written as a
   single block (some tailored copies are) stays at body size rather than being
   blown up into a wall. */
.resume-summary p:first-child:not(:last-child) {
  font-size: var(--rs-lede);
  line-height: 1.45;
  letter-spacing: -0.008em;
}
.resume-summary p + p {
  margin-top: var(--space-2);
  color: var(--ink-soft);
}

/* ── Skills ─────────────────────────────────────────────────────────────────
   A table, not two columns of prose: one row per group, the group name in the
   left rail, its items on one line to the right, hairlines between. */

.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.skill-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.skills-grid .skill-row:last-child { border-bottom: 0; padding-bottom: 0; }

.skill-label {
  font-size: var(--rs-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.skill-value {
  font-size: var(--rs-body);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Below the width where a label and a real list can sit side by side, the row
   stacks instead of squeezing the list into three words a line. */
@media (max-width: 30rem) {
  .skill-row { grid-template-columns: 1fr; }
}

/* ── Experience ─────────────────────────────────────────────────────────────
   The employer is the loudest line in the block; the dates sit off to the
   right in the quiet voice, aligned down the column so the shape of the career
   reads before any of the words do. */

.job {
  margin-bottom: var(--rs-item-gap);
  break-inside: avoid;
}
.job:last-child { margin-bottom: 0; }

.job-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  align-items: baseline;
  justify-content: space-between;
}

.job-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--rs-title);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.job-company { color: var(--ink); }
.job-role { font-weight: 400; color: var(--ink-soft); }

.job-dates {
  font-size: var(--rs-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--muted);
}

.job-location {
  margin: 0 0 var(--space-3);
  font-size: var(--rs-small);
  line-height: 1.5;
  color: var(--muted);
}

.job-bullets,
.job-summary { margin: 0; }

.job-summary {
  max-width: 44rem;
  color: var(--ink-soft);
}

.job-bullets {
  padding-left: 0.95rem;
  list-style: none;
}
.job-bullets li {
  position: relative;
  margin-bottom: var(--space-2);
  max-width: 44rem;
  line-height: var(--rs-leading);
  color: var(--ink-soft);
}
.job-bullets li:last-child { margin-bottom: 0; }
.job-bullets li strong { color: var(--ink); font-weight: 600; }

/* A short dash rather than a dot: it sits on the first line's baseline band
   and reads as the start of a line rather than as punctuation. */
.job-bullets li::before {
  content: "";
  position: absolute;
  left: -0.95rem;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--rule-strong);
}

/* ── Projects ───────────────────────────────────────────────────────────── */

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rs-item-gap) var(--space-6);
}

.project { break-inside: avoid; }

.project-name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--rs-body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.project-role {
  font-weight: 400;
  color: var(--muted);
}

.project p {
  margin: 0;
  font-size: var(--rs-body);
  line-height: 1.5;
  color: var(--ink-soft);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--rs-tag);
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Education ──────────────────────────────────────────────────────────── */

.edu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  align-items: baseline;
  justify-content: space-between;
}
.edu-school {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--rs-title);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.edu-degree { font-weight: 400; color: var(--ink-soft); }
.edu-dates,
.edu-location {
  font-size: var(--rs-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--muted);
}
.edu-location { margin: 0; }
.edu-note {
  margin: var(--space-2) 0 0;
  font-size: var(--rs-body);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ── Cover letter ───────────────────────────────────────────────────────────
   /for/<slug>/cover/. Same document chrome as a resume — same .resume-bar,
   the same .resume-header markup, the same print block — with a letter's
   measure and rhythm under it. Markup:

     <div class="page resume-doc cover-doc">
       <div class="resume-bar">…</div>
       <main class="container container--narrow resume cover">
         <header class="resume-header">…</header>
         <p class="cover-meta">Re: …</p>
         <div class="cover-body">
           <p class="cover-greeting">…</p>  <p>…</p> × 5
           <div class="cover-signoff">…<p class="cover-name">…</p>
                                        <p class="cover-links">…</p></div>
         </div>
       </main>
       <footer class="site-footer">…</footer>
     </div>                                                                  */

/* .cover-doc and .cover carry no rules of their own — they are markup hooks
   that say "this document is a letter, not a resume". Everything below styles
   the pieces inside them. */

/* The document column stays the resume's — the header block is the same markup
   and has to lay out the same way — but the letter itself is held to a shorter
   measure, because a letter is read straight down in one column. */
.cover-body,
.cover-meta { max-width: 38rem; }

.cover-meta {
  margin: var(--space-5) 0 var(--space-6);
  font-size: var(--rs-small);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* A letter is read in sentences, so it keeps the serif the resume gives up. */
.cover-body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.66;
  color: var(--ink-soft);
}
.cover-body p { margin: 0 0 var(--space-4); }
.cover-greeting { color: var(--ink); }

.cover-signoff { margin-top: var(--space-6); }
.cover-signoff p { margin: 0; }
.cover-name {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.cover-signoff .cover-links { margin-top: var(--space-1); }
.cover-links {
  font-family: var(--font-sans);
  font-size: var(--rs-small);
  line-height: 1.6;
  color: var(--muted);
}
.cover-links a { color: var(--muted); text-decoration-color: var(--rule-strong); }
.cover-links a:hover { color: var(--accent); }

/* ── Two-up ─────────────────────────────────────────────────────────────── */

@media (min-width: 40rem) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The footer keeps the document's column rather than the site's wide one. */
.resume-doc .site-footer { margin-top: var(--space-8); }

/* ── Print ──────────────────────────────────────────────────────────────────
   Letter, two pages, black on white whatever the screen was doing. Hex is
   deliberate here: print must not inherit the dark palette. */

@page {
  size: letter;
  margin: 0.55in;
}

@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-raised: #ffffff;
    --ink: #000000;
    --ink-soft: #1f1f1f;
    --muted: #4a4a4a;
    --rule: #c0c0c0;
    --rule-strong: #6f6f6f;
    --accent: #000000;
    --accent-soft: transparent;
  }

  html { background: #ffffff; }

  body {
    background: #ffffff;
    color: #1f1f1f;
    font-size: 10.5pt;
  }

  /* Chrome adds the site's own margins on top of @page; drop them. */
  .container,
  .container--narrow {
    max-width: none;
    padding-inline: 0;
  }

  .page { min-height: 0; display: block; }

  .resume-bar,
  .site-footer { display: none !important; }

  /* The whole document is two pages of Letter and not one line more, so the
     vertical rhythm here is tighter than the screen's. Compress the rhythm
     before the type: 10.5pt body is the floor. */
  .resume-doc {
    --rs-name: 20pt;
    --rs-tagline: 9pt;
    --rs-heading: 13pt;
    --rs-title: 11.5pt;
    --rs-body: 10.5pt;
    --rs-lede: 11.5pt;
    --rs-small: 8.8pt;
    --rs-tag: 7.4pt;
    --rs-leading: 1.32;
    --rs-section-gap: 12pt;
    --rs-item-gap: 9pt;
  }

  .resume {
    padding-block: 0;
    font-size: var(--rs-body);
  }

  .resume-header { padding-bottom: 6pt; }
  .resume-name { line-height: 0.95; }
  .resume-tagline { margin-top: 3pt; line-height: 1.3; }
  .resume-contact { line-height: 1.4; }
  .resume-summary { margin-top: 8pt; padding-left: 9pt; border-left-width: 1.5pt; }
  .resume-summary p { max-width: none; }
  .resume-summary p:first-child:not(:last-child) { line-height: 1.32; }
  .resume-summary p + p { margin-top: 3pt; }
  .section-title { margin-bottom: 6pt; padding-bottom: 3pt; line-height: 1.15; }

  .skill-row {
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: 9pt;
    padding-block: 3pt;
  }
  .skill-label,
  .skill-value { line-height: 1.32; }

  .job { margin-bottom: var(--rs-item-gap); }
  .job-title,
  .job-dates { line-height: 1.3; }
  .job-location { margin-bottom: 3pt; line-height: 1.3; }
  .job-summary,
  .job-bullets li { max-width: none; }
  .job-bullets { padding-left: 10pt; }
  .job-bullets li { margin-bottom: 3pt; }
  .job-bullets li::before { left: -10pt; top: 0.74em; width: 4.5pt; }

  .project-name { margin-bottom: 1.5pt; line-height: 1.3; }
  .project p { line-height: 1.32; }
  .tags { margin-top: 3pt; gap: 2pt; }
  .tag {
    padding: 0 3pt;
    border-color: #c0c0c0;
    background: transparent;
    color: #4a4a4a;
    line-height: 1.4;
  }

  .edu-school,
  .edu-dates { line-height: 1.3; }
  .edu-location { line-height: 1.3; }
  .edu-note { margin-top: 2pt; line-height: 1.32; }

  /* A resume link is a fact, not a destination: no underline, no URL. */
  a {
    color: inherit !important;
    text-decoration: none !important;
  }
  a[href]::after { content: none !important; }

  /* A cover letter is one page. It shares the resume's header sizing (both
     documents carry .resume-doc) and only the letter body is re-set here. The
     screen measure comes off: @page margins already set the line length. */
  .cover-body,
  .cover-meta { max-width: none; }
  .cover-meta { margin: 8pt 0 11pt; font-size: 9pt; }
  .cover-body { font-size: 10.5pt; line-height: 1.45; }
  .cover-body p { margin-bottom: 8pt; }
  .cover-signoff { margin-top: 14pt; }
  .cover-name { font-size: 11.5pt; line-height: 1.3; }
  .cover-signoff .cover-links { margin-top: 2pt; }
  .cover-links { font-size: 9pt; line-height: 1.4; }

  /* Pagination. A five-bullet job is too tall to keep atomic — forcing it
     whole strands a third of a page — so a job may split, but never between
     its heading and its first line, and never inside a single bullet. */
  .project,
  .skill-row,
  .edu-row,
  .resume-header,
  .resume-summary,
  .job-summary,
  .job-bullets li { break-inside: avoid; page-break-inside: avoid; }

  .job,
  .resume-section,
  .job-bullets { break-inside: auto; page-break-inside: auto; }

  .section-title,
  .job-header,
  .job-location,
  .project-name,
  .edu-school { break-after: avoid; page-break-after: avoid; }

  body { orphans: 2; widows: 2; }
}