/* ==========================================================================
   SIMPLE.CSS — the accessible version.
   Large type, high contrast (black on white, or white on black when the
   visitor's system is in dark mode), underlined links, thick focus rings,
   no animation. Uses system fonts so nothing extra has to load.
   ========================================================================== */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #000000;
  --muted: #3d3d3d;      /* 10.6:1 on white */
  --rule: #000000;
  --link: #0033cc;       /* 9.9:1 on white */
  --focus: #0033cc;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #ffffff;
    --muted: #d0d0d0;    /* 13.6:1 on black */
    --rule: #ffffff;
    --link: #8fb4ff;     /* 9.6:1 on black */
    --focus: #ffd400;
  }
}

* { box-sizing: border-box; }
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

html { font-size: 125%; }            /* 20px base */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  padding: .6rem 1rem;
  background: var(--text); color: var(--bg);
  font-weight: 700;
}
.skip:focus { top: 1rem; }

.top, main { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.top { padding-top: 1.25rem; font-size: .9rem; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: 1.6rem; margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 2px solid var(--rule); }
h3 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1rem; max-width: 65ch; }

.intro { padding: 2.5rem 0 .5rem; }
.role { font-size: 1.2rem; margin: .4rem 0 1.2rem; }
.lead { font-size: 1.2rem; }
.meta { color: var(--muted); margin: .1rem 0 .4rem; }

.facts { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.facts li { display: flex; align-items: center; gap: .6rem; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; background: #0a7a32; flex: none; }
.dot[data-status="soon"] { background: #9a5b00; }
.dot[data-status="busy"] { background: #b3261e; }

.toc { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0 0; font-weight: 600; }

.projects { padding-left: 1.6rem; margin: 0; }
.projects li { margin: 0 0 1.6rem; padding-left: .3rem; }
.projects h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.projects p { margin: 0; }

.plain { list-style: none; padding: 0; margin: 0; }
.plain li { margin: 0 0 1.1rem; }

.rows { list-style: none; padding: 0; margin: 0 0 1rem; }
.rows li { padding: .55rem 0; border-bottom: 1px solid var(--muted); overflow-wrap: anywhere; }
.rows span { display: inline-block; min-width: 7.5rem; color: var(--muted); }

main { padding-bottom: 4rem; }
.noscript { max-width: 44rem; margin: 2rem auto; padding: 0 1.25rem; font-weight: 700; }

/* Logo: white artwork, shown black on the light scheme */
.logo { height: 120px; width: auto; margin: 0 0 1.5rem; filter: invert(1); }
.logo.no-invert { filter: none; }
@media (prefers-color-scheme: dark) { .logo { filter: none; } }