/* Plainspoken: one grotesk, two sizes, ink on warm white. No accent color, no motion. */

:root {
  --ink: #111111;
  --paper: #FAFAF8;
  --gray: #6B6B6B;            /* 5.1:1 on --paper */
  --line: rgba(17, 17, 17, .38); /* link underlines */

  --u: 1.75rem;               /* the baseline unit: one line of body text (28px) */
  --body: 1.0625rem;          /* 17px */
  --large: 1.75rem;           /* 28px on phones, 36px from 760px */
  --large-lh: calc(var(--u) * 1.25);
  --small: .875rem;           /* footnotes only (14px) */

  --aside: 8.75rem;
  --gap: 2.5rem;
  --measure: 33rem;
  --edge: 1.5rem;

  --portrait-bg: #e9e9e6;
  color-scheme: light;
}

/* Dark mode: follows the device unless the reader picks one with the footer switch (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EDECE8;
    --paper: #121212;
    --gray: #9A9994;            /* 6.9:1 on --paper */
    --line: rgba(237, 236, 232, .4);
    --portrait-bg: #262626;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #EDECE8;
  --paper: #121212;
  --gray: #9A9994;
  --line: rgba(237, 236, 232, .4);
  --portrait-bg: #262626;
  color-scheme: dark;
}

@media (min-width: 760px) {
  :root { --large: 2.25rem; --large-lh: calc(var(--u) * 1.5); --edge: clamp(2.5rem, 10vw, 10rem); }
}

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

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--body);
  line-height: var(--u);
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, figure { margin: 0; }
h1, h2 { font-weight: 400; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

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

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: .24em;
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
  text-decoration-color: currentColor;
}

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

.skip {
  position: absolute; left: var(--edge); top: -6rem; z-index: 10;
  padding: .5rem .875rem;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
}
.skip:focus { top: 1rem; }
.skip:focus-visible { outline-color: var(--ink); }

/* Page: a narrow column set off a generous left margin */
.page {
  max-width: calc(var(--aside) + var(--gap) + var(--measure) + var(--edge) * 2);
  margin-inline: auto;
  padding-inline: var(--edge);
  overflow-wrap: break-word;
}
main.page { padding-top: calc(var(--u) * 3); }
@media (min-width: 760px) {
  footer.footer { padding-top: calc(var(--u) * 4); }
  main.page { padding-top: calc(var(--u) * 5); }
}

/* Each row: a gray label (or the mark, or the portrait) beside the text */
.row + .row { margin-top: calc(var(--u) * 2); }
.row > .aside, .row > .label { margin-bottom: calc(var(--u) * .5); }

@media (min-width: 760px) {
  .row {
    display: grid;
    grid-template-columns: var(--aside) minmax(0, var(--measure));
    column-gap: var(--gap);
    align-items: start;
  }
  .row > .aside, .row > .label { margin-bottom: 0; }
  .row > .text { grid-column: 2; }
  .intro + .row { margin-top: calc(var(--u) * 3); }
}

.label { color: var(--gray); font-size: var(--body); line-height: var(--u); }
.dim { color: var(--gray); }
.num, time { font-variant-numeric: tabular-nums; }

.large {
  font-size: var(--large);
  line-height: var(--large-lh);
  letter-spacing: -.021em;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }
div.text > * + * { margin-top: var(--u); }
abbr[title] { text-decoration: none; }

/* The mark sits on the cap height of the first large line */
.mark {
  display: block;
  width: 2.5rem; height: 2.5rem;
  margin-top: .375rem;
  color: var(--ink);
}
@media (min-width: 760px) { .mark { margin-top: .625rem; } }

/* Portrait: small, black and white */
.portrait {
  width: 7.5rem;
  filter: grayscale(1) contrast(1.04);
  background: var(--portrait-bg);
}
@media (min-width: 760px) {
  .portrait { width: 100%; margin-top: .5rem; }
}

/* Plain lists */
.principles li + li { margin-top: calc(var(--u) * .5); }
.principles .name { display: block; }

/* Entries with a date set flush right in tabular figures */
/* CV entries: the organization, then its details in gray on the next line. Each entry is two lines of the
   baseline grid, separated by half a line, so every row has the same rhythm. */
.entry .org, .entry .dim { display: block; }
.entries .entry + .entry { margin-top: calc(var(--u) * .5); }
.nowrap { white-space: nowrap; }

.footer {
  padding-top: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 3);
  color: var(--gray);
  font-size: var(--small);
  line-height: calc(var(--u) * .75);
}
.footer div.text > * + * { margin-top: calc(var(--u) * .75); }

/* Light / dark switch: a plain text button that reads like a link. */
.theme-toggle {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--line);
}
.theme-toggle:hover { text-decoration-color: currentColor; }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }