/* Joseph P. Weakland. Set like a printed CV: one serif, one link color, one rule. */

:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --ink: #1b1b1b;
  --quiet: #5a5a5a;
  --rule: #c9c9c9;
  --link: #1f4a85;
  --link-hover: #11305a;
  --select: #d6e0f0;

  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L",
           "TeX Gyre Pagella", P052, Georgia, serif;

  --margin: 8.5rem;   /* the narrow left column: years and figures */
  --gap: 2.25rem;
  --measure: 34rem;   /* the text column */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141414;
    --ink: #e4e2dd;
    --quiet: #a6a4a0;
    --rule: #464646;
    --link: #a7bfe8;
    --link-hover: #d0def5;
    --select: #2d3d57;
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol { margin: 0; }

p { text-wrap: pretty; }
p + p { margin-top: 0.75em; }

cite { font-style: italic; }

/* Old-style figures read well in prose, but a 1 in an address looks like an i. */
a[href^="mailto:"] { font-variant-numeric: lining-nums; }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

::selection { background: var(--select); color: var(--ink); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--link);
  outline: 2px solid var(--link);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The sheet */

.page {
  max-width: calc(var(--margin) + var(--gap) + var(--measure) + 4rem);
  margin: 0 auto;
  padding: 4.5rem 2rem 3rem;
}

/* Letterhead: name, one line, contact, the contents, one hairline. */

.masthead {
  text-align: center;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.name {
  font-size: 2.125rem;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-variant-caps: small-caps;
  font-variant-numeric: normal;
  text-wrap: balance;
}
.name a { color: inherit; text-decoration: none; }

.role { margin-top: 0.375rem; text-wrap: balance; }

.contact,
.masthead nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.75rem;
  font-size: 1rem;
}
.contact { margin-top: 0.375rem; }
.masthead nav ul { margin-top: 1.125rem; }

.masthead nav a { text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.masthead nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--quiet);
}

/* Two columns: a narrow margin for years and figures, a text column for the rest. */

.opening,
.section,
.entries > li {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
  column-gap: var(--gap);
}

.opening > *,
.section > * { grid-column: 2; }

.opening > .portrait {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 100%;
  margin-top: 0.4rem;
}

.section {
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);   /* sections are divided by a hairline */
}
.section.first { margin-top: 0; padding-top: 0; border-top: 0; }
.section > .entries,
.section > .figures { grid-column: 1 / -1; }
.section > * + * { margin-top: 0.75rem; }
.section > h1 + *,
.section > h2 + * { margin-top: 0.5rem; }
.section > p + .entries,
.section > .entries + p,
.section > .figures + p { margin-top: 1.25rem; }

h1 {
  font-size: 1.75rem;
  font-weight: normal;
  line-height: 1.25;
  text-wrap: balance;
}

h2 {
  font-size: 1.375rem;
  font-weight: normal;
  line-height: 1.3;
  text-wrap: balance;
}
h2 a { text-decoration-thickness: 1px; }

/* Entries: one per row, year in the margin when there is one. */

.entries { list-style: none; padding: 0; }
.entries > li + li { margin-top: 0.875rem; }
.entries > li > .m {
  grid-column: 1;
  text-align: right;
  color: var(--quiet);
}
.entries > li > :not(.m) { grid-column: 2; }

.entries h3 {
  font-size: inherit;
  font-weight: normal;
  font-style: italic;
  line-height: inherit;
}
.entries h3 + p { margin-top: 0.125rem; }
.entries.works > li + li { margin-top: 1.5rem; }

.source { color: var(--quiet); }

.links { margin-top: 0.375rem; }
.links a { margin-right: 1.25rem; }
.links a:last-child { margin-right: 0; }

/* Figures: large lining numerals hang in the margin, where the years go,
   with plain labels beside them. No rules. */

.figures-caption { font-style: italic; color: var(--quiet); }
.figures {
  list-style: none;
  padding: 0;
}
.section > .figures-caption + .figures { margin-top: 0.25rem; }
.figures > li {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding: 0.1rem 0;
}
.figures .n {
  text-align: right;
  font-size: 2.25rem;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}
.figures .n .plus { font-size: 0.6em; vertical-align: 0.55em; margin-left: 0.04em; }
.figures .label { color: var(--ink); }

.plain-list { padding-left: 1.2em; }
.plain-list li + li { margin-top: 0.5rem; }

/* The essay */

.essay h2 { margin-top: 2rem; }
.essay h2 + p { margin-top: 0.5rem; }
.essay .note { color: var(--quiet); }
.essay .after { margin-top: 2rem; }

/* Footer */

.colophon {
  margin-top: 4rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--quiet);
}
.colophon p { text-wrap: balance; }
.colophon .contact { justify-content: center; margin-bottom: 0.375rem; }

/* Narrow screens: the margin folds into the text column, except for
   short years and figures. */

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .page { padding: 2.5rem 1rem 2.5rem; }
  .masthead { margin-bottom: 2.25rem; padding-bottom: 1.5rem; }
  .name { font-size: 1.625rem; letter-spacing: 0.03em; }
  .contact, .masthead nav ul { gap: 0.25rem 1rem; font-size: 0.9375rem; }

  .opening,
  .section,
  .entries > li { display: block; }

  .opening > .portrait { width: 6.5rem; margin: 0 0 1.25rem; }

  .entries > li > .m { display: block; text-align: left; }

  .figures > li {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    column-gap: 1rem;
  }
  .entries.dated > li > .m { font-size: 0.9375rem; }
  .figures .n { font-size: 1.875rem; }
  .figures .label { line-height: 1.3; }
  .masthead nav ul { max-width: 19rem; margin-inline: auto; }
  h1 { font-size: 1.5rem; }
}

/* Print: the site prints as a plain CV. */

@media print {
  :root {
    --paper: #ffffff;
    --ink: #000000;
    --quiet: #444444;
    --rule: #888888;
    --link: #000000;
  }
  html { font-size: 9.333pt; }
  .skip-link, .masthead nav { display: none; }
  .contact a[href*="linkedin.com"]::after { content: ": linkedin.com/in/josephweakland"; }
  .entries a[href^="https:"]::after { content: " (" attr(href) ")"; font-style: normal; }
  .page { max-width: none; padding: 0; }
  a { text-decoration: none; }
  .section, .entries > li, .figures { break-inside: avoid; }
  .essay-page .masthead, .no-print { display: none; }
}