/*
 * CV stylesheet: warm editorial typesetting for screen, dark mode and A4 print.
 *
 * Author: John Grimes
 */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Colour: warm paper, near-black ink and a single rubric red for labels and
   link underlines, after the red used for headings in manuscripts. */
:root {
  --paper: #fbf8f3;
  --ink: #1d1b18;
  --muted: #5f5850;
  --rule: #ddd5c8;
  --accent: #9b2f1c;
  --serif: "Source Serif 4", georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
  --label-width: 9rem;
  --gutter: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171513;
    --ink: #ebe6dd;
    --muted: #a89f93;
    --rule: #3a352f;
    --accent: #f0907a;
  }
}

/* Base text: old-style proportional figures, ligatures and optical sizing so
   the serif adapts its proportions to each size it is set at. */
html {
  font-size: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizelegibility;
  hanging-punctuation: first allow-end last;
  -webkit-font-smoothing: antialiased;
}

header,
main,
footer {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

p,
li,
dd {
  hyphens: auto;
  text-wrap: pretty;
}

p {
  margin: 0 0 0.6em;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* Acronyms in true small caps keep runs of FHIR, SQL and CSIRO from
   shouting over the text around them. */
abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

/* The italic has no small caps, so acronyms in italic text keep full caps
   rather than let the browser synthesise poor ones. */
:is(cite, .role) abbr {
  font-variant-caps: normal;
  letter-spacing: normal;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere;
  hyphens: manual;
  transition:
    color 0.15s,
    text-decoration-color 0.15s;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Masthead */

/* The contact links' 44px tap targets add space of their own, so the
   margins around them are smaller than the type alone would need. */
header {
  padding-block: clamp(2.5rem, 8vw, 5rem) 1.75rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 1.9rem + 3.4vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

.headline {
  margin: 0.6rem 0 0.8rem;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.875rem;
}

/* Links are at least 44px tall so they are easy to tap. */
.contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
}

/* Profile links show the service name on screen and the address on paper. */
.print {
  display: none;
}

/* Sections: a label column on the left and a measure of text on the right. */

main > section {
  display: flex;
  gap: var(--gutter);
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}

h2 {
  flex: 0 0 var(--label-width);
  margin: 0;
  padding-top: 0.3em;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.body {
  flex: 1;
  min-width: 0;
}

.body > :last-child {
  margin-bottom: 0;
}

.lede {
  font-size: 1.1em;
  line-height: 1.5;
  hyphens: manual;
}

/* Entries */

.entry + .entry {
  margin-top: 1.6rem;
}

/* Explains overlapping dates in the entries that follow. */
.note {
  margin: 1.6rem 0 0.4rem;
  color: var(--muted);
  font-style: italic;
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1rem;
}

h3 {
  margin: 0;
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.3;
}

.dates,
dt,
footer {
  color: var(--muted);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
}

.dates {
  margin: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.role {
  margin: 0.05rem 0 0.5rem;
  font-style: italic;
}

.entry ul {
  margin: 0 0 0.6em;
  padding: 0;
  list-style: none;
}

.entry li {
  position: relative;
  margin-bottom: 0.25em;
  padding-left: 1.1em;
}

/* Hanging en dash markers in the accent colour. */
.entry li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Short supplementary lists with dot leaders running to the dates. */

.minor {
  margin-top: 1.6rem;
}

.minor h3 {
  margin-bottom: 0.35rem;
  font-size: 1em;
}

.ledger {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger li {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.25em;
}

.ledger li::after {
  content: "";
  flex: 1 0 1.5rem;
  order: 1;
  margin: 0 0.5em;
  border-bottom: 1px dotted var(--muted);
}

.ledger .dates {
  order: 2;
}

/* Publications: hanging indents, titles in italic. */

.body > h3 + * {
  margin-top: 0.4rem;
}

.body > .citations + h3 {
  margin-top: 1.2rem;
}

.citations {
  margin: 0;
  padding: 0;
  list-style: none;
}

.citations li {
  margin-bottom: 0.5em;
  padding-left: 1.25em;
  text-indent: -1.25em;
}

cite {
  font-style: italic;
}

/* Keep identifiers whole: a DOI broken across lines is easy to mistype. */
.citations a {
  font-size: 0.9em;
  white-space: nowrap;
}

/* Skills */

.skills {
  margin: 0;
}

.skills div {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.35em;
}

dt {
  flex: 0 0 6.5rem;
  padding-top: 0.2em;
  font-size: 0.8125rem;
}

dd {
  flex: 1;
  margin: 0;
}

/* Colophon */

/* The rule sits on the paragraph so it spans the text measure, matching the
   section rules above it. */
footer {
  padding-block: 0 4rem;
  font-size: 0.8125rem;
}

footer p {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

@media (width <= 44rem) {
  header {
    padding-bottom: 1rem;
  }

  main > section {
    flex-direction: column;
    gap: 0.75rem;
    padding-block: 1.25rem;
  }

  h2 {
    flex-basis: auto;
    padding-top: 0;
  }

  .skills div {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.6em;
  }

  dt {
    flex-basis: auto;
  }
}

/* Print: black ink on white A4, sized in points. Declared last so it
   overrides the dark colour scheme. */

@page {
  size: a4;
  margin: 10mm 14mm;
}

@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --muted: #4a4540;
    --rule: #c8c0b4;
    --accent: #8a2a19;
    --label-width: 6.5rem;
    --gutter: 1.25rem;
  }

  html {
    font-size: 8.5pt;
  }

  /* Body text is set in points so it stays at a readable 10pt while labels
     keep the smaller rem scale. */
  body {
    font-size: 10pt;
    line-height: 1.25;
    -webkit-font-smoothing: auto;
  }

  .screen {
    display: none;
  }

  .print {
    display: inline;
  }

  p,
  .entry ul {
    margin-bottom: 0.4em;
  }

  .entry li {
    margin-bottom: 0.1em;
  }

  .role {
    margin-bottom: 0.3rem;
  }

  .citations li {
    margin-bottom: 0.25em;
  }

  .skills div {
    margin-bottom: 0.15em;
  }

  .contact,
  .dates,
  dt {
    font-size: 0.95rem;
  }

  header,
  main {
    max-width: none;
    padding-inline: 0;
  }

  header {
    padding-block: 0 0.8rem;
  }

  h1 {
    font-size: 2.75rem;
  }

  .headline {
    margin: 0.35rem 0 0.7rem;
  }

  main > section {
    padding-block: 0.5rem;
  }

  a {
    text-decoration: none;
  }

  .contact a {
    min-height: 0;
  }

  /* Keep each entry whole, so no page starts with a stray bullet. */
  .entry,
  .minor,
  .skills div,
  .citations li {
    break-inside: avoid;
  }

  .entry + .entry,
  .minor,
  .note {
    margin-top: 0.55rem;
  }

  h3,
  .entry-head,
  .note {
    break-after: avoid;
  }

  /* The colophon describes the web page, so it is left off paper. */
  footer {
    display: none;
  }
}