@charset "utf-8";
/* ==========================================================================
   Print / PDF resume
   ==========================================================================

   Turns the website into a two-page resume. The website is the single source
   of truth for the content; this stylesheet decides what survives the cut:

     .printHide   - an individual bullet omitted from the PDF
     .printBrief  - an older role collapsed to a one-line entry
     #printHeader - the masthead, which only exists in print

   Regenerate the PDF with ./make-resume.sh after editing index.html.
   ========================================================================== */

/* Running letterhead.

   Chrome supports CSS paged-media margin boxes, so the footer (every page)
   and the continuation header (page 2 onward, suppressed by @page :first)
   are defined here. Two things worth knowing if this is ever edited:

     - position:fixed does NOT repeat per page in Chrome's print-to-PDF; it
       paints once (top on page one, bottom on the last page). Margin boxes
       are the only mechanism that repeats.
     - a margin box shrinks to its content, so the full-width hairlines come
       from the otherwise-empty @top-center / @bottom-center boxes forced to
       width:100%. The left/right boxes carry the text and need nowrap, since
       the stretched centre box squeezes them.

   Margin boxes live inside the page margin, so none of this costs content
   area. */
@page {
  size: letter;
  margin: 0.5in 0.45in 0.6in;

  @top-left {
    content: "ILYA KELNER";
    font-family: ProximaNova-Bold, sans-serif;
    font-size: 7.5pt;
    letter-spacing: 1.2pt;
    color: #7a7a7a;
    white-space: nowrap;
    vertical-align: bottom;
    padding-bottom: 12pt;
  }

  @top-center {
    content: "";
    width: 100%;
    border-bottom: 0.5pt solid #dcdcdc;
    vertical-align: bottom;
    padding-bottom: 8pt;
  }

  @top-right {
    content: "Engineering Leader & Systems Architect";
    font-family: ProximaNova, sans-serif;
    font-size: 7.5pt;
    color: #9a9a9a;
    width: 2.4in;
    text-align: right;
    white-space: nowrap;
    vertical-align: bottom;
    padding-bottom: 12pt;
  }

  @bottom-left {
    content: "ilya@ilyakelner.com\00a0\00b7\00a0ilyakelner.com\00a0\00b7\00a0linkedin.com/in/ilyakelner";
    font-family: ProximaNova, sans-serif;
    font-size: 7.5pt;
    color: #9a9a9a;
    white-space: nowrap;
    vertical-align: top;
    padding-top: 11pt;
  }

  @bottom-center {
    content: "";
    width: 100%;
    border-top: 0.5pt solid #dcdcdc;
    vertical-align: top;
  }

  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: ProximaNova, sans-serif;
    font-size: 7.5pt;
    color: #9a9a9a;
    width: 1in;
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
    padding-top: 11pt;
  }
}

/* Page one already carries the full masthead, so it gets no running header
   and no rule above it. */
@page :first {
  @top-left {
    content: "";
  }
  @top-right {
    content: "";
  }
  @top-center {
    content: "";
    border-bottom: none;
  }
}

/* --- Masthead ----------------------------------------------------------- */
body {
  font-family: ProximaNova, sans-serif;
  font-size: 9.15pt;
  line-height: 1.29;
  color: #000000;
  background: #ffffff;
}

/* --- Strip the site chrome ---------------------------------------------- */
#sidebar,
#profile,
#stats,
#navigation,
#contactSection,
#menuToggle,
#drawerScrim,
.printHide {
  display: none !important;
}

/* Sections and roles that do not earn their space on a two-page resume.
   The website keeps all of it. */
#AboutMe,
#Projects,
.printDrop {
  display: none !important;
}

.gridContainer {
  display: block;
  width: 100%;
}

.ContentPanel {
  display: block;
  grid-column: auto;
  grid-row: auto;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* --- Masthead ----------------------------------------------------------- */
#printHeader {
  display: block;
  border-bottom: 1.5pt solid #000000;
  padding-bottom: 7pt;
  margin-bottom: 4pt;
}

#printHeader h1 {
  font-family: ProximaNova-Bold;
  font-size: 23pt;
  letter-spacing: 0.4pt;
  margin: 0 0 3pt;
  padding: 0;
}

#printHeader .printTitles {
  font-family: OpenSans, sans-serif;
  font-weight: bold;
  font-size: 10pt;
  color: #3a3a3a;
  margin: 0 0 4pt;
}

#printHeader .printContact {
  font-size: 9pt;
  color: #444444;
  margin: 0;
}

/* --- Section headings --------------------------------------------------- */
.ContentPanel h1 {
  font-family: ProximaNova-Bold;
  font-size: 12pt;
  letter-spacing: 1pt;
  text-transform: uppercase;
  border-bottom: 0.75pt solid #999999;
  padding: 0 0 2pt;
  margin: 6pt 0 3pt;
  page-break-after: avoid;
  break-after: avoid;
}

.ContentPanel h2 {
  font-family: ProximaNova-Bold;
  font-size: 10pt;
  color: #000000;
  padding: 0;
  margin: 6pt 0 2pt;
  page-break-after: avoid;
  break-after: avoid;
}

/* The markup wraps headings and tables in <p> elements; neutralise the
   inherited spacing so the print rhythm is set here and nowhere else. */
.ContentPanel section > p {
  margin: 0;
}

/* --- Work entries ------------------------------------------------------- */
/* Long roles are allowed to flow across a page break - forcing a 20-line
   role onto the next page whole strands most of a page. The heading lines
   below stay welded to the content that follows them instead. */
.Role {
  margin-top: 4pt;
}

/* Compact one-line roles have nothing to flow, so keep them intact. */
.printCompact {
  page-break-inside: avoid;
  break-inside: avoid;
}

.RoleHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10pt;
}

.Institution {
  font-family: ProximaNova-Bold;
  font-size: 11.5pt;
  line-height: 1.2;
}

.Years {
  font-family: ProximaNova;
  font-size: 8.8pt;
  color: #555555;
  white-space: nowrap;
}

.Project {
  font-family: ProximaNova-Bold;
  font-size: 9.6pt;
  color: #333333;
}

.Position {
  font-family: ProximaNova-Light;
  font-size: 9.6pt;
  color: #333333;
  font-style: italic;
}

.Description {
  font-size: 9.4pt;
  color: #000000;
  margin-top: 1pt;
}

.Description p {
  margin: 2pt 0 3pt;
}

.Description ul {
  margin: 2pt 0 0;
  padding-left: 13pt;
}

.Description li {
  margin-bottom: 0.9pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Roles older than the detailed window collapse to a single line:
     Institution - Position                                        Dates
   display:contents lifts the RoleHead spans into the same flex row as the
   position so all three sit on one baseline. */
.printCompact,
#Education .Role {
  display: flex;
  align-items: baseline;
  gap: 5pt;
  margin-top: 3pt;
}

.printCompact .RoleHead,
#Education .Role .RoleHead {
  display: contents;
}

.printCompact .Institution,
#Education .Role .Institution {
  order: 1;
  font-size: 10pt;
}

.printCompact .Position,
#Education .Role .Position {
  order: 2;
  flex: 1 1 auto;
  font-size: 9.2pt;
}

.printCompact .Position::before,
#Education .Role .Position::before {
  content: "\2014\00a0";
}

.printCompact .Years,
#Education .Role .Years {
  order: 3;
  margin-left: auto;
}

.printCompact .Project,
.printCompact .Description {
  display: none !important;
}

/* --- Skills: each category becomes one flowing "Label: a, b, c" run ----- */
#Skills .SkillTable {
  margin-top: 2pt;
}

#Skills .Position {
  display: inline;
  font-family: ProximaNova-Bold;
  font-style: normal;
  font-size: 9.2pt;
  color: #000000;
}

#Skills .Position::after {
  content: ":\00a0";
}

#Skills .Description,
#Skills ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#Skills ul li {
  display: inline;
  background: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  font-size: 9.2pt;
}

#Skills ul li:not(:last-child)::after {
  content: ", ";
}

/* The technology rings are a screen flourish; print keeps the plain
   comma-separated names. The selector has to out-specify the screen rule. */
#Skills .techRings li {
  display: inline;
  gap: 0;
  /* Zeroes the whitespace text nodes between the child spans, which would
     otherwise render as a space before each comma. */
  font-size: 0;
}

#Skills .techRings li::after {
  font-size: 9.15pt;
}

#Skills .techRings .proficiencyRing,
.visuallyHidden {
  display: none !important;
}

#Skills .techName {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 9.15pt;
}

/* --- Patents / Publications / Education --------------------------------- */
#Patents ul {
  margin: 0;
  padding-left: 13pt;
}

#Patents li {
  margin-bottom: 1.5pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* master.css sizes this at 13pt with an id selector, which out-specifies
   the plain .Position rule above; restate it at print size. */
#Publications .Position {
  font-size: 9.4pt;
  font-style: normal;
  color: #444444;
}

#Publications .Project {
  font-size: 9.6pt;
}

/* Venue and DOI share a line in print; two lines here costs a page break. */
#Publications .venue,
#Publications .doi {
  display: inline;
}

#Publications .venue::after {
  content: "\00a0\00b7\00a0";
}

#Education .Position {
  font-style: normal;
}

#Education .Role .Position {
  font-style: normal;
}

/* --- Links: plain text, no URL expansion -------------------------------- */
a,
a:visited {
  color: #000000;
  text-decoration: none;
}

/* --- Page breaking ------------------------------------------------------ */
section {
  break-inside: auto;
}

/* Education is two lines and must not split; everything else flows so that
   no page is left half empty. */
#Education {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Never leave a role's heading stranded at the foot of a page with its
   bullets overleaf. */
.Position {
  page-break-after: avoid;
  break-after: avoid;
}

/* Keep a section heading welded to the first line under it. */
.ContentPanel h1 {
  page-break-after: avoid;
  break-after: avoid;
}

tr {
  page-break-inside: avoid;
  break-inside: avoid;
}

img {
  max-width: 100% !important;
}