/* ABOUTME: Typography and responsive presentation for Gal Sapir's research CV. */
/* ABOUTME: Print rules render the same content as a two-page letter-size PDF. */
@font-face { font-family: "IBM Plex Mono"; src: url('/fonts/ibm-plex-mono.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url('/fonts/newsreader.ttf') format('truetype'); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --bg: #0a0a0b; --fg: #cac4b4; --heading: #e9e4d8; --muted: #a29c90; --rule: #35332e; --mono: "IBM Plex Mono", monospace; --prose: "Newsreader", Georgia, serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--prose); font-size: 19px; line-height: 1.48; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: #726d61; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--heading); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.site-nav, .site-footer { max-width: 980px; margin: auto; padding: 28px 44px; display: flex; justify-content: space-between; font: 12px/1.5 var(--mono); color: var(--muted); }
.site-nav a { text-decoration: none; }
main { max-width: 980px; margin: 34px auto 0; padding: 0 44px; }
.name-line { display: flex; gap: 22px; align-items: baseline; }
h1 { font: 400 46px/1.2 var(--mono); letter-spacing: -.07em; color: var(--heading); margin: 0; }
.degrees { font: 13px var(--mono); color: var(--muted); }
.role { font: 14px/1.6 var(--mono); margin: 14px 0 18px; }
.contact, .links { font: 12px/1.8 var(--mono); margin: 4px 0; }
.links { color: var(--muted); }
.links span { padding: 0 7px; }
.profile { font-size: 23px; line-height: 1.45; max-width: 760px; margin: 32px 0 42px; }
h2 { font: 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--muted); padding-top: 13px; border-top: 1px solid var(--rule); margin: 32px 0 22px; }
h3 { font: 400 19px/1.4 var(--mono); color: var(--heading); margin: 0; }
.employer { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.date { font: 11px/1.6 var(--mono); color: var(--muted); white-space: nowrap; }
.career { margin: 12px 0; font-size: 17px; }
.career p { display: flex; justify-content: space-between; margin: 2px 0; }
.career span { font: 11px/1.6 var(--mono); color: var(--muted); }
.context { margin: 14px 0 24px; color: var(--muted); font-size: 17px; }
.project { margin-top: 27px; }
h4 { margin: 0 0 9px; color: var(--heading); font-size: 22px; font-weight: 400; }
.descriptor { display: block; font: 11px/1.6 var(--mono); color: var(--muted); margin-top: 4px; }
ul { padding-left: 19px; margin: 0; }
li { padding-left: 3px; margin-bottom: 7px; }
li::marker { color: var(--muted); }
strong { font-weight: 600; }
.second-sheet { margin-top: 50px; }
.continuation { display: none; }
.publications { list-style: none; padding: 0; margin: 0; }
.publications li { margin: 0 0 21px; padding: 0; }
.publications li > a { font-size: 20px; color: var(--heading); }
.publications p { font-size: 16px; margin: 4px 0 0; }
.publications .publication-note { color: var(--muted); }
.small-link { font: 11px/1.6 var(--mono); }
.earlier article { margin: 0 0 24px; }
.job-title { margin: 4px 0; font-size: 17px; }
.earlier article > p:last-child { margin: 6px 0; }
.school { font-size: 15px; margin-bottom: 14px; }
.education { margin: 0; font-size: 17px; }
.education div { display: grid; grid-template-columns: 45px 1fr auto; gap: 12px; margin: 7px 0; }
dt, dd { margin: 0; }
.education dd:last-child { font: 11px/1.7 var(--mono); }
.writing p { margin: 10px 0; }
.site-footer { border-top: 1px solid var(--rule); margin-top: 48px; margin-bottom: 20px; }
@media (max-width: 600px) {
  body { font-size: 18px; }
  main { margin-top: 24px; padding: 0 23px; }
  .site-nav, .site-footer { padding: 22px 23px; font-size: 10px; }
  h1 { font-size: 36px; }
  .name-line { gap: 16px; }
  .degrees { font-size: 11px; }
  .role { font-size: 12px; }
  .contact, .links { font-size: 10px; }
  .links span { padding: 0 3px; }
  .profile { font-size: 22px; margin-bottom: 32px; }
  .employer { display: block; }
  .career p { display: block; }
  .career span { display: block; margin-bottom: 7px; }
  .education div { gap: 8px; grid-template-columns: 34px 1fr auto; }
  .school { font-size: 13px; }
}
@page { size: Letter; margin: 12mm 16mm 14mm; }
@media print {
  :root { color-scheme: light; --bg: #fff; --fg: #282824; --heading: #151512; --muted: #59594f; --rule: #b8b8ac; }
  body { font-size: 10pt; line-height: 1.25; }
  .site-nav, .site-footer { display: none; }
  main { margin: 0; padding: 0; max-width: none; }
  .sheet { margin: 0; }
  .second-sheet { break-before: page; }
  .continuation { display: flex; justify-content: space-between; font: 8pt/1.4 var(--mono); color: var(--muted); margin-bottom: 15pt; }
  h1 { font-size: 29pt; }
  .name-line { gap: 14pt; }
  .degrees { font-size: 9pt; }
  .role { font-size: 9pt; margin: 6pt 0 8pt; }
  .contact, .links { font-size: 7.5pt; line-height: 1.55; margin: 2pt 0; }
  .links span { padding: 0 4pt; }
  .profile { font-size: 11.5pt; line-height: 1.3; margin: 12pt 0 13pt; max-width: none; }
  h2 { font-size: 7.7pt; margin: 11pt 0 8pt; padding-top: 6pt; }
  h3 { font-size: 11pt; }
  .date { font-size: 7.4pt; }
  .career { font-size: 9.5pt; margin: 5pt 0; }
  .career p { margin: 1pt 0; }
  .career span { font-size: 7.4pt; }
  .context { font-size: 9pt; margin: 5pt 0 8pt; }
  .project { margin-top: 9pt; break-inside: avoid; }
  h4 { font-size: 11.5pt; margin: 0 0 4pt; }
  .descriptor { font-size: 7.3pt; margin-top: 2pt; }
  ul { padding-left: 12pt; }
  li { margin-bottom: 4pt; padding-left: 1pt; }
  a { text-decoration-color: #b2b2a8; }
  .publications li { margin-bottom: 9pt; break-inside: avoid; }
  .publications li > a { font-size: 11pt; }
  .publications p { font-size: 9pt; margin-top: 3pt; }
  .small-link { font-size: 7.5pt; margin: 7pt 0 14pt; }
  .earlier article { margin-bottom: 9pt; break-inside: avoid; }
  .job-title { font-size: 9.5pt; margin: 3pt 0; }
  .earlier article > p:last-child { margin: 4pt 0; }
  .school { font-size: 9pt; margin-bottom: 7pt; }
  .education { font-size: 9.5pt; }
  .education div { grid-template-columns: 29pt 1fr auto; gap: 8pt; margin: 5pt 0; }
  .education dd:last-child { font-size: 7.5pt; }
  .writing p { margin: 6pt 0; font-size: 10pt; }
}