/* ------------------------------------------------------------------
   Résumé — Dingqi (Dylan) Liu
   Fonts: Instrument Serif (display), Instrument Sans (text), Geist Mono (meta)
   Design language: see README.md
   Paper: set with ?paper=letter | ?paper=a4
   Theme: set with ?theme=contrast | ?theme=colored (default: greyscale)
------------------------------------------------------------------ */

:root {
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --paper: #fff;
  /* page */
  --ink: #000;
  /* body text, names, titles, timeline */
  --soft: #444;
  /* summary, role line, contact labels */
  --faint: #666;
  /* employer names, meta lines, sidebar labels, fluency (lightest text that prints reliably) */
  --rule: #c2c2c2;
  /* bullet dashes, section-heading rules */
  --panel: #f2f2f2;
  /* sidebar background */
  --accent: var(--ink);
  /* section headers, surname */

  /* paper (letter default) */
  --page-w: 8.5in;
  --page-h: 11in;
  --side-w: 61mm;
  --pad-top: 14mm;
  --pad-x: 15mm;
  --section-gap: 6mm;
  /* space above each section header */
  --entry-gap: 3.6mm;
  /* space between jobs */

  /* timeline: a dot level with each entry title, a line down to just above the next dot */
  --tl-dot: 5px;
  --tl-dot-top: 8.5px;
  /* centres the dot on the title's first line: (15pt × 1.1 − 5px) / 2 */
  --tl-line: 1px;
  --tl-gap: 4px;
  /* space between the line and each dot */
}

/* ---------- themes ---------- */
html[data-theme="contrast"] {
  --ink: #000;
  --soft: #222;
  --faint: #444;
  --rule: #888;
  --panel: #f0f0f0;
}

html[data-theme="colored"] {
  --accent: #d93a1e;
  /* Vermillion */
  /* --accent: #002fa7; */
  /* Ultramarine */
  /* --accent: #007c80; */
  /* Teal */
  /* --accent: #4d7c0f; */
  /* Green */
}

html[data-paper="a4"] {
  --page-w: 210mm;
  --page-h: 297mm;
  --side-w: 62mm;
  --pad-top: 16mm;
  --pad-x: 16mm;
  --section-gap: 7.4mm;
  --entry-gap: 4.1mm;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #d9d8d4;
}

body {
  font-family: var(--sans);
  font-size: 8pt;
  line-height: 11.7pt;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding: 32px 16px;
  /* screen only, removed in print */
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ---------- the sheet ---------- */
.page {
  width: var(--page-w);
  height: var(--page-h);
  margin: 0 auto;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr var(--side-w);
  overflow: hidden;
  /* never spills to a 2nd page */
  box-shadow: 0 2px 30px rgba(0, 0, 0, .12);
}

.main {
  padding: var(--pad-top) 13mm 0 var(--pad-x);
  overflow: hidden;
}

.sidebar {
  background: var(--panel);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  padding: calc(var(--pad-top) + 2mm) 9mm 0;
  overflow: hidden;
}

/* ---------- header ---------- */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54pt;
  line-height: .95;
  letter-spacing: -1.3pt;
}

h1 em {
  color: var(--accent);
}

h1 em,
h3 em {
  font-style: italic;
}

.role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18pt;
  line-height: 1.2;
  color: var(--soft);
  margin-top: 2.5mm;
}

.summary {
  font-size: 9pt;
  line-height: 14pt;
  color: var(--soft);
  margin-top: 3.5mm;
  max-width: 120mm;
}

/* ---------- section headers: small sans caps ---------- */
h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 7pt;
  line-height: 1;
  letter-spacing: 1.7pt;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3.5mm;
}

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

/* Experience / Education: heading flush right with the dates, rule filling the space to its left */
.main h2 {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-right: -1.7pt;
  /* cancels the trailing letter-spacing so the last letter lines up with the dates */
}

.main h2::before {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

/* ---------- entries ---------- */
.entry+.entry {
  margin-top: var(--entry-gap);
}

.entry {
  break-inside: avoid;
  position: relative;
  padding-left: 22px;
}

/* Timeline: each entry draws its own dot and the segment below it, so the last entry has no tail */
.entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--tl-dot-top);
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--ink);
}

.entry::after {
  content: "";
  position: absolute;
  left: calc((var(--tl-dot) - var(--tl-line)) / 2);
  top: calc(var(--tl-dot-top) + var(--tl-dot) + var(--tl-gap));
  /* runs past this entry's bottom, through the gap, and stops short of the next dot */
  bottom: calc(var(--tl-gap) - var(--entry-gap) - var(--tl-dot-top));
  border-left: var(--tl-line) solid var(--ink);
}

.entry:last-child::after {
  content: none;
}

h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15pt;
  line-height: 1.1;
  letter-spacing: -.15pt;
}

h3 em {
  color: var(--faint);
}

.meta {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  font-family: var(--mono);
  font-size: 6.5pt;
  line-height: 1.3;
  letter-spacing: .4pt;
  text-transform: uppercase;
  color: var(--faint);
  margin: 1mm 0 1.4mm;
}

li {
  position: relative;
  padding-left: 4.2mm;
  margin-bottom: .5mm;
}

li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rule);
}

/* ---------- sidebar ---------- */
.sidebar section+section {
  margin-top: 7mm;
}

/* space between side projects */
.sidebar p+h3 {
  margin-top: 2mm;
}

.sidebar h3 {
  font-size: 14pt;
  margin-bottom: 1mm;
}

.sidebar h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 10.5pt;
  line-height: 1.2;
  color: var(--faint);
  margin-top: 2mm;
}

.sidebar h4:first-of-type {
  margin-top: 0;
}

/* label / value rows in Contact; values line up per group */
.keyed {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2.5mm;
}

.keyed .key {
  color: var(--soft);
}

.muted {
  color: var(--faint);
}

/* ---------- overflow warning (screen only) ---------- */
body.overflowing .page {
  outline: 3px solid #e5484d;
}

body.overflowing::before {
  content: "Content overflows the page — trim text or spacing";
  display: block;
  width: var(--page-w);
  margin: 0 auto 12px;
  font: 600 12px/1.4 var(--sans);
  color: #e5484d;
}

/* ---------- print ---------- */
@media print {

  html,
  body {
    background: #fff;
    padding: 0;
  }

  .page {
    margin: 0;
    box-shadow: none;
    outline: none !important;
  }

  body::before {
    display: none !important;
  }
}