:root {
  --bg: #eef3ea;
  --fg: #1d2b24;
  --dim: #7a8b80;
  --accent: #2f7d4f;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--fg);
  font: 19px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* the donut sits behind everything, barely there */
#donut {
  position: fixed;
  top: 50%;
  right: 4vw;
  transform: translateY(-50%);
  margin: 0;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
  max-width: 38em;
  margin: 0 0 0 clamp(20px, 9vw, 140px);
  padding: 12vh 0 10vh;
}

h1 { font-size: 1em; font-weight: 700; margin: 0 0 1.2em; }
h2 {
  font-size: 1em;
  font-weight: 400;
  color: var(--dim);
  margin: 3.2em 0 1em;
}
h2::before { content: "// "; }

p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
li { margin-bottom: 0.7em; }

/* dropdowns */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary b::before { content: "[+] "; color: var(--accent); font-weight: 400; }
details[open] summary b::before { content: "[\2212] "; }
summary b { border-bottom: 1px dashed var(--dim); }
details p { margin: 0.5em 0 0.9em 2ch; color: var(--dim); }
summary:hover b { color: var(--accent); border-bottom-color: var(--accent); }

/* accent instead of bold */
b, h1 { color: var(--accent); font-weight: 400; }

.row { display: flex; justify-content: space-between; gap: 1em; }
.row b { white-space: nowrap; }
.row span { color: var(--dim); white-space: nowrap; font-size: 0.85em; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.where { color: var(--dim); font-size: 0.85em; }
.links a { margin-right: 1.4em; }

footer { margin-top: 5em; color: var(--dim); font-size: 0.85em; }

::selection { background: var(--fg); color: var(--bg); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  main { margin: 0 20px; padding: 7vh 0 8vh; }
  #donut { right: 50%; transform: translate(50%, -50%); opacity: 0.14; }
  details p { margin-left: 4ch; }
}

/* narrow screens: title on one line, role and year underneath */
@media (max-width: 860px) {
  .row { flex-direction: column; gap: 0; }
  .row span { white-space: normal; padding-left: 4ch; }
}