/* The CV page, /cv/. At the top, who, and beside it two sheets of paper: the
   official PDF, and behind it this page as it prints, which saves it as a PDF.
   Then the years from 2018 drawn the way the home page draws a day: school and
   work painted as washes along a pencilled line, the papers as pencil dots
   piled on it (cv.js). Below, the entries, each school and job under its short
   name set large with a stroke as long as it lasted, the papers a year at a
   time and numbered. On paper it becomes a CV of its own. */

.cv { padding-top: 64px; }

/* Who, and how to reach them; beside it the official PDF. */
.cv__head { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 40px 80px; align-items: start; }
.cv__top { color: var(--ink-2); }
.cv__head h1 { margin-top: 22px; font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.cv__role { margin-top: 14px; font-size: 19px; line-height: 1.45; font-style: italic; color: var(--ink-2); }
/* Every item carries its dot in front; the row starts one dot early and that
   strip is clipped, so no wrapped line begins with a dot. */
.cv__contact { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 18px 0 0 -1.5em; clip-path: inset(-6px -6px -6px 1.5em); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.cv__contact > *::before { content: "\00b7"; display: inline-block; width: 1.5em; text-align: center; color: var(--ink-3); }
.cv__contact a { color: var(--ink-2); text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); text-underline-offset: .22em; transition: color .2s, text-decoration-color .2s; }
.cv__contact a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.cv__profile { max-width: 660px; margin-top: 26px; font-size: 17px; line-height: 1.7; }

/* Two sheets laid a little crooked on the wall, what each is pencilled under
   them the way the home page captions a painting. In front the official PDF,
   its first page; behind it, up and to the right, this page as it prints. Either
   sheet, or its name, lifts the sheet when pointed at. */
.cv__files { margin-top: 18px; }
.cv__stack { position: relative; aspect-ratio: 100 / 126; }
.cv__sheet, .cv__copy { position: absolute; width: 88%; transform-origin: 50% 60%; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.cv__sheet { left: 0; bottom: 0; z-index: 1; display: block; transform: rotate(-1.6deg); }
.cv__sheet img, .cv__copy { background: #fff; outline: 1px solid rgba(40, 36, 30, .1); outline-offset: -1px; }
.cv__sheet img { display: block; width: 100%; height: auto; }
.cv__copy { right: 0; top: 0; padding: 0; border: 0; cursor: pointer; transform: rotate(2.4deg); }
.cv__copy svg { display: block; width: 100%; height: auto; }
.cv__sheet:hover, .cv__files:has([data-for="sheet"]:hover, [data-for="sheet"]:focus-visible) .cv__sheet { transform: rotate(0deg) translateY(-4px); }
.cv__copy:hover, .cv__files:has([data-for="copy"]:hover, [data-for="copy"]:focus-visible) .cv__copy { transform: translate(7px, -9px) rotate(3.6deg); }
.cv__caps { display: grid; gap: 9px; margin-top: 16px; }
.cv__cap { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 0 2px; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none;
  font: 400 22px/1 var(--hand); color: rgba(62, 60, 56, .78); white-space: nowrap; }
.cv__cap:focus-visible { outline: none; }
.cv__cap span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: transparent; transition: text-decoration-color .25s; }
.cv__cap:hover span:first-child, .cv__cap:focus-visible span:first-child,
.cv__files:has(.cv__sheet:hover) [data-for="sheet"] span:first-child, .cv__files:has(.cv__copy:hover) [data-for="copy"] span:first-child { text-decoration-color: rgba(62, 60, 56, .6); }
.cv__mini-page text { font-family: var(--serif); }
.cv__strip { display: none; }

/* The years. Lanes from the top: what is under the pointer, school, work,
   then the papers standing on the line of the years. */
.years { position: relative; height: 166px; margin: 72px 0 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.years__paint { position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: multiply; }
.years__marks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.years.is-wait { opacity: 0; }
.years__axis { fill: none; stroke: rgba(70, 68, 63, .62); stroke-width: .8; stroke-linecap: round; }
.years__axis.is-light { stroke: rgba(70, 68, 63, .22); stroke-width: .9; }
.years__tick { stroke: var(--ink-3); stroke-width: 1; }
.years__tick.is-major { stroke: var(--ink-2); }
.years__later { fill: none; stroke: rgba(70, 68, 63, .5); stroke-width: .7; stroke-linecap: round; }
.years__later.is-light { stroke: rgba(70, 68, 63, .22); stroke-width: .9; }
.years__dot { fill: rgba(62, 60, 56, .62); }
.years__grain { fill: rgba(62, 60, 56, .3); }
.years__p.is-prize .years__dot { fill: rgba(196, 108, 114, .78); }
.years__p.is-prize .years__grain { fill: rgba(176, 88, 96, .35); }
.years__p { transition: opacity .2s; }
.years.is-paper .years__p:not(.is-hot) { opacity: .4; }
.years__now { stroke: var(--ink); stroke-width: 1; }
.years__hot { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.years__lbl { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; font-size: 13px; color: var(--ink-3); transition: color .2s, opacity .2s; }
.years__lbl.is-gone { opacity: 0; }
.years__lbl.is-hot { color: var(--ink); }
.years__year { color: var(--ink-3); transform: translateX(-50%); }
.years__lane { color: var(--ink-2); text-shadow: 0 0 2px var(--page), 0 0 2px var(--page), 0 0 3px var(--page); }
.years__mark { font-size: 13px; color: var(--ink-2); transform: translateX(-50%); transition: opacity .2s; }
.years__say { position: absolute; left: 0; top: -4px; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-style: italic; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .18s; }
.years__say.is-on { opacity: 1; }
.years.is-saying .years__mark { opacity: 0; }
.years.is-point { cursor: pointer; }

/* The entries. A section is named small over a line of ink; each entry has
   on its left what it is called and when, on its right the rest. */
.cv__sec { padding-top: 104px; scroll-margin-top: var(--top); }
.cv .sec__head { flex-wrap: wrap; gap: 6px 24px; padding-bottom: 12px; }
.cv .sec__head h2 { font-size: 23px; line-height: 1.2; font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .12em; }
.cv .sec__head .lbl { white-space: nowrap; }
.cv .sec__head .lbl sup { font-size: .8em; line-height: 0; }
.cv__dot { color: var(--ink-3); }
.cv__list, .cv__papers { list-style: none; margin: 0; padding: 0; }
.cv__item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding: 34px 0 36px; border-bottom: 1px solid var(--hair); scroll-margin-top: calc(var(--top) + 24px); }
.cv__what { max-width: 700px; padding-top: 4px; }

/* School and work: the short name large, its dates under it. */
.cv__name { font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
.cv__name + .cv__when { display: block; margin-top: 8px; }
.cv__when { color: var(--ink-2); font-variant-numeric: oldstyle-nums; transition: color .2s; }
.cv__exp { display: block; color: var(--ink-3); }
/* How long it lasted, painted (cv.js) on one scale for school and work. */
.cv__len { display: block; height: 18px; margin-top: 14px; }
.cv__len canvas { display: block; mix-blend-mode: multiply; }
.cv__c { display: none; }
.cv__title { display: block; font-size: 19px; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: transparent; transition: text-decoration-color .25s; }
a.cv__title:hover { text-decoration-color: var(--ink); }
.cv__team { color: var(--ink-2); }
.cv__sub { margin-top: 4px; font-size: 16px; line-height: 1.5; font-style: italic; color: var(--ink-2); }
.cv__place { font-style: normal; color: var(--ink-3); }
.cv__place::before { content: "\00b7"; display: inline-block; width: 1.4em; text-align: center; }
.cv__more { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.cv__more a { text-decoration-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.cv__more a:hover { text-decoration-color: var(--ink); }

/* Papers, a year at a time, the year set as the years of service and
   honours are. */
.cv__year { padding-bottom: 14px; }
.cv__num, #service .cv__when, #awards .cv__when { font: 400 23px/1 var(--serif); letter-spacing: -.01em; font-variant-caps: normal; font-variant-numeric: oldstyle-nums; color: var(--ink); }
.cv__num { padding-top: 3px; }
.cv__paper { position: relative; padding: 4px 0 26px; scroll-margin-top: calc(var(--top) + 24px); }
/* Its number hangs in the margin, just clear of the year. */
.cv__n { position: absolute; right: calc(100% + 18px); top: 4px; font-size: 15.5px; line-height: 25px; font-variant-numeric: oldstyle-nums; color: var(--ink-3); white-space: nowrap; }
.cv__n .cv__rose { margin: 0 .5em .14em 0; }
.cv__paper:last-child { padding-bottom: 20px; }
.cv__paper .cv__title { font-size: 18.5px; line-height: 1.36; }
.cv__by { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cv__by .me { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.cv__by sup { font-size: .7em; line-height: 0; }
.cv__venue { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.cv__at { font-variant-caps: all-small-caps; letter-spacing: .07em; font-variant-numeric: oldstyle-nums; }
.cv__venue > span + span::before { content: "\00a0\00b7\00a0"; color: var(--ink-3); font-style: normal; }
.cv__note { font-style: italic; color: var(--ink-3); }
.cv__award { font-style: italic; color: #a4535a; }
.cv__links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 8px; }
.cv__links a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent); transition: color .2s, text-decoration-color .2s; }
.cv__links a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.cv__links a[href^="http"]::after { content: "\2197"; display: inline-block; margin-left: .14em; font: 400 .8em/1 var(--sans); color: var(--ink-3); text-decoration: none; }

/* Service and honours: only a date on the left; an honour carries rose. */
.cv__rose { display: inline-block; width: 7px; height: 7px; margin: 0 .55em .16em 0; border-radius: 50%; background: rgba(196, 108, 114, .85); vertical-align: middle; }
#service .cv__item, #awards .cv__item { padding: 22px 0 24px; }

/* At the end, the two ways to take it away again. */
.cv__end { max-width: 700px; margin: 64px 0 0 192px; font-size: 16px; line-height: 1.6; font-style: italic; color: var(--ink-2); }
.cv__end a, .cv__save { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--ink-3); transition: text-decoration-color .2s; }
.cv__save { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.cv__end a:hover, .cv__save:hover, .cv__save:focus-visible { text-decoration-color: var(--ink); }

/* An entry the years point at, or that points at the years. */
.cv__item.is-hot .cv__when { color: var(--ink); }
.cv__item.is-hot .cv__title, .cv__paper.is-hot .cv__title { text-decoration-color: var(--ink-3); }
.cv__item.is-found .cv__title, .cv__paper.is-found .cv__title { text-decoration-color: var(--ink); }
.cv .foot { font: 400 15px/1.5 var(--serif); }

@media (max-width: 960px) {
  .cv__head { grid-template-columns: minmax(0, 1fr) 172px; gap: 32px 48px; }
  .cv__cap { font-size: 20px; }
  .cv__item { grid-template-columns: 148px minmax(0, 1fr); gap: 28px; }
  .cv__end { margin-left: 176px; }
  .cv__name { font-size: 28px; }
}
@media (max-width: 760px) {
  .cv { padding-top: 40px; }
  .cv__head { grid-template-columns: 1fr; gap: 0; }
  .cv__head h1 { margin-top: 18px; font-size: 44px; }
  .cv__role { font-size: 17px; }
  .cv__contact { font-size: 15px; }
  .cv__profile { font-size: 16.5px; }
  /* The sheets, smaller, with their names beside them. */
  .cv__files { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
  .cv__stack { width: 112px; flex: none; }
  .cv__caps { flex: 1; max-width: 210px; gap: 14px; margin: 0; }
  .cv__cap { font-size: 22px; }
  .years { height: 180px; margin-top: 52px; }
  .years__lbl { font-size: 12px; }
  .cv__sec { padding-top: 72px; }
  .cv .sec__head h2 { font-size: 20px; }
  .cv__item { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 28px; }
  .cv__name { font-size: 27px; }
  .cv__name + .cv__when { margin-top: 6px; }
  .cv__what { padding-top: 0; }
  .cv__title, .cv__paper .cv__title { font-size: 17.5px; }
  .cv__num { padding-top: 0; font-size: 22px; }
  .cv__year .cv__papers { padding-top: 6px; }
  .cv__paper { padding-bottom: 22px; }
  .cv__papers { padding-left: 34px; }
  .cv__n { right: calc(100% + 12px); line-height: 23.8px; }
  .cv__end { margin: 48px 0 0; }
  #service .cv__item, #awards .cv__item { gap: 2px; padding: 18px 0 20px; }
  #service .cv__when, #awards .cv__when { font-size: 22px; }
  #service .cv__side:has(.cv__when:empty) { display: none; }
}

/* On paper: a CV of its own. The name with the ways to reach me set to its
   right; then each section named in a narrow column on the left, its entries
   to the right with their dates at the far edge, the papers under their
   years. Slate for the names of things, rose for honours, the rest in ink. The
   years, the paint, the sheet and the site around the page are left out. */
@page { size: letter; margin: .75in .8in .8in;
  @bottom-center { content: "Tianyang Liu \00b7  Curriculum Vitae \00b7  " counter(page); font: 7.5pt "Iowan Old Style", Georgia, serif; color: #9a9a96; } }
@media print {
  :root { --ink: #151515; --ink-2: #4a4a47; --ink-3: #8c8c88; --hair: #d2d5da; --slate: #4b6079; --rose: #a4535a; --amber: #b98a4e; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { font-size: 100%; }
  html, body { background: #fff; }
  body { font-size: 9.5pt; line-height: 1.4; }
  .top, .cv__top, .cv__files, .years, .foot, .cv__links, .cv__name, .cv__end, .cv__len canvas { display: none !important; }
  .cv { max-width: none; padding: 0; }
  a { text-decoration: none; }

  .cv__head { display: block; }
  .cv__id { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24pt; align-items: end; }
  .cv__head h1 { grid-column: 1; margin: 0; font-size: 25pt; line-height: 1; letter-spacing: -.02em; }
  .cv__role { grid-column: 1; margin-top: 4pt; font-size: 10pt; line-height: 1.35; }
  /* Three to a line, right-aligned. */
  .cv__contact { display: block; grid-column: 2; grid-row: 1 / 3; margin: 0; clip-path: none; text-align: right; font-size: 8.6pt; line-height: 1.55; }
  .cv__contact > * { white-space: nowrap; }
  .cv__contact > *::before { width: 1.3em; }
  .cv__contact > :nth-child(3n+1)::before { display: none; }
  .cv__contact > :nth-child(3)::after { content: "\A"; white-space: pre; }
  .cv__contact a { color: var(--ink-2); text-decoration: none; }
  .cv__profile { grid-column: 1 / -1; max-width: none; margin-top: 11pt; padding-top: 9pt; border-top: .6pt solid var(--slate); font-size: 9.4pt; line-height: 1.5; color: var(--ink-2); }
  /* The years, flat: school in slate and work in amber, each paper a dot. */
  .cv__strip { display: block; width: 100%; height: auto; margin-top: 12pt; break-inside: avoid; }

  /* A section: its name on the left over a hairline, the entries beside it. */
  .cv__sec { display: grid; grid-template-columns: 1.12in minmax(0, 1fr); column-gap: 12pt; margin-top: 13pt; padding-top: 7pt; border-top: .5pt solid var(--hair); }
  .cv .sec__head { display: block; padding: 0; border: 0; }
  .cv .sec__head h2 { font-size: 9.4pt; line-height: 1.4; font-variant-caps: all-small-caps; letter-spacing: .11em; color: var(--slate); }
  .cv .sec__head .lbl { display: block; margin-top: 3pt; font-size: 7.2pt; line-height: 1.35; letter-spacing: .04em; white-space: normal; color: var(--ink-3); }
  .cv__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14pt; border: 0; break-inside: avoid; }
  .cv__item, #service .cv__item, #awards .cv__item { padding: 0 0 6pt; }
  .cv__item:last-child, #service .cv__item:last-child, #awards .cv__item:last-child { padding-bottom: 0; }
  .cv__item > .cv__side { order: 2; text-align: right; }
  .cv__what { max-width: none; padding: 0; }
  .cv__when, #service .cv__when, #awards .cv__when { margin: 0; font: 400 8.4pt/13pt var(--serif); font-variant-caps: all-small-caps; font-variant-numeric: lining-nums; letter-spacing: .05em; white-space: nowrap; color: var(--ink-2); }
  .cv__name + .cv__when { margin-top: 0; }
  .cv__exp { color: var(--ink-3); }
  /* How long, as a flat bar under the dates, lighter for what is still to come. */
  .cv__len { width: calc(var(--y) * 12pt); height: 2.2pt; margin: 2.5pt 0 0 auto; border-radius: 1.1pt; --c: var(--slate); --c2: #c3cad3;
    background: linear-gradient(90deg, var(--c) calc(var(--d) * 100%), var(--c2) 0); }
  #experience .cv__len { --c: var(--amber); --c2: #ead8bf; }
  .cv__title, .cv__paper .cv__title { font-size: 10pt; line-height: 1.3; text-decoration: none; }
  .cv__team { color: var(--ink-2); }
  .cv__sub { margin-top: .5pt; font-size: 9.2pt; line-height: 1.38; }
  .cv__more { margin-top: .5pt; font-size: 9pt; line-height: 1.4; }
  .cv__more a { text-decoration: none; }
  .cv__rose { width: 5pt; height: 5pt; margin: 0 .5em .12em 0; background: var(--rose); }

  /* Papers: each year set small in slate with a hairline after it. */
  .cv__year { display: block; padding: 0 0 2pt; break-inside: auto; }
  .cv__year > .cv__side { text-align: left; break-after: avoid; }
  .cv__num { display: flex; align-items: center; gap: 8pt; margin: 0 0 3pt; padding: 0; font: 400 8.6pt/13pt var(--serif); font-variant-caps: normal; font-variant-numeric: lining-nums; letter-spacing: .08em; color: var(--slate); }
  .cv__num::after { content: ""; flex: 1; border-top: .5pt solid var(--hair); }
  .cv__year + .cv__year { margin-top: 4pt; }
  .cv__papers { padding-left: 15pt; }
  .cv__paper { padding: 0 0 6.5pt; break-inside: avoid; }
  .cv__n { right: calc(100% + 5pt); top: 0; font: 400 8pt/13pt var(--serif); font-variant-numeric: lining-nums; color: var(--slate); }
  .cv__n .cv__rose { width: 4pt; height: 4pt; margin: 0 .4em .1em 0; }
  .cv__paper:last-child { padding-bottom: 0; }
  .cv__by { margin-top: .5pt; font-size: 8.7pt; line-height: 1.38; color: var(--ink-2); }
  .cv__by .me { font-weight: 700; color: var(--ink); text-decoration: none; }
  .cv__venue { margin-top: .5pt; font-size: 8.8pt; line-height: 1.38; }
  .cv__at { color: var(--slate); letter-spacing: .06em; }
  .cv__note { color: var(--ink-3); }
  .cv__award { color: var(--rose); }
}