/*
 * CV styles: black text on white in Arial, a font already installed on
 * almost every device so nothing has to download.
 *
 * Sizes are in rem so they scale with the reader's browser text size and
 * zoom (WCAG 1.4.4). Spacing is in em/unitless so it grows with the text and
 * survives user text-spacing overrides (WCAG 1.4.12).
 */

:root {
  --color-bg: #ffffff;
  --color-text: #000000;

  /* Arial, then metric-compatible equivalents where Arial isn't installed */
  --font-body: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', Arimo, sans-serif;

  /* Type scale. 1.125rem = 18px at the browser default. */
  --text-base: 1.125rem;
  --text-small: 1rem;
  --text-h1: 2.25rem;
  --text-h2: 1.625rem;
  --text-h3: 1.3125rem;
  --text-h4: 1.125rem;

  --measure: 42rem;            /* about 70 characters per line */
  --toc-width: 13rem;
  --space: 1.25rem;
  --line-height: 1.6;
}

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

html {
  font-size: 100%;             /* respect the reader's text size setting */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--line-height);
  overflow-wrap: break-word;
  font-kerning: normal;
}

main, .site-footer, .toc {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space);
}

/* Contents: above the CV on narrow screens and when zoomed in, in a
   column on the left on wide screens. Breakpoint is in em so zooming in
   switches to the single-column layout. */
.toc { padding-top: calc(var(--space) * 2); font-size: var(--text-small); }
.toc-title { font-weight: 700; margin-bottom: 0.5em; }
.toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-text); }
.toc li + li { margin-top: 0; }
/* Each link is at least 24px tall (WCAG 2.5.8) */
.toc a { display: block; min-height: 24px; padding: 0.3em 0 0.3em 0.9em; text-decoration-thickness: 0.06em; }

@media (min-width: 64em) {
  .layout.has-toc {
    display: grid;
    grid-template-columns: var(--toc-width) minmax(0, var(--measure));
    column-gap: calc(var(--space) * 2);
    justify-content: center;
    align-items: start;
    padding-inline: var(--space);
  }
  .has-toc > main, .has-toc > .site-footer, .has-toc > .toc {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .has-toc > .toc {
    grid-row: 1 / span 2;
    /* Stays in view while scrolling; it never overlaps the CV text, so it
       can't hide focused content (WCAG 2.4.11). */
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
  .has-toc > main, .has-toc > .site-footer { grid-column: 2; }
}

main { padding-block: calc(var(--space) * 2) var(--space); }
main:focus { outline: none; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  margin-block: 1.75em 0.5em;
}
h1 { font-size: var(--text-h1); margin-top: 0; }
h2 {
  font-size: var(--text-h2);
  scroll-margin-top: var(--space);   /* breathing room when jumped to from Contents */
  padding-bottom: 0.25em;
  border-bottom: 2px solid var(--color-text);
}
h3 { font-size: var(--text-h3); margin-top: 1.5em; }
h4 { font-size: var(--text-h4); margin-block: 1.5em 0.4em; }

p, ul, ol, dl { margin-block: 0 1em; }
ul, ol { padding-inline-start: 1.5em; }
li + li { margin-top: 0.4em; }
li::marker { font-size: 1em; }

strong { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--color-text); margin-block: 2em; }

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

table { border-collapse: collapse; width: 100%; margin-block: 0 1em; }
th, td { text-align: start; padding: 0.4em 0.6em; border-bottom: 1px solid var(--color-text); }

/* Links are black like the text, so they're marked by an underline rather
   than colour (WCAG 1.4.1). Hover thickens the underline. */
a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}
a:hover { text-decoration-thickness: 0.18em; }

/* Focus: thick black outline with a white gap, visible on any background
   (WCAG 2.4.7, 2.4.13). */
:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-bg);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space);
  top: var(--space);
  z-index: 1;
  padding: 0.75em 1em;
  background: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.intro { margin-bottom: 1.5em; }
.intro h1 { margin-bottom: 0.3em; }

.contact { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25em 1.5em; }
.contact li + li { margin-top: 0; }
/* Standalone links meet the 24×24px target size (WCAG 2.5.8) */
.contact a { display: inline-block; min-height: 24px; }

/* Organisation and dates beneath a role title */
.role-meta { margin-top: -0.25em; }

.site-footer {
  padding-block: var(--space) calc(var(--space) * 2);
  font-size: var(--text-small);
  border-top: 1px solid var(--color-text);
}
.downloads { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75em 1.5em; }
.downloads li + li { margin-top: 0; }
.downloads a { display: inline-block; min-height: 24px; padding-block: 0.25em; }
.file-meta { white-space: nowrap; }

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }
  h4 { font-size: 11pt; }
  main, .site-footer { padding: 0; max-width: none; }
  .skip-link, .downloads, .toc { display: none; }
  .layout.has-toc { display: block; padding: 0; }
  .site-footer { border: 0; padding: 0; }
  h2, h3, h4 { break-after: avoid; }
  li { break-inside: avoid; }
}