/* PLAIN — a sheet of pale water, deep-water type, one monospaced face. Nothing is decorated; the only mark is
   the "+". Lime is a highlighter pen, pink is anything numbered or anything you can touch. The type is Geist Mono,
   and the top bar is Geist, its sibling: same designer, same skeleton, so the name and the text are one family.
   Geist Mono has no italic, so the two lines that were italic are set upright in the lighter ink instead.
   In the dark the water and the ink trade places: deep water for the page, pale water for the type. The
   highlighter and the pink stay, since they are the colour; what sits on the highlighter is always deep ink. */
:root {
  color-scheme: light dark;
  --bg: #E9F6F9; --ink: #0A3443; --ink-2: #5E8692; --line: rgba(10,52,67,.16);
  --pink: #FF3DA9; --green: #C4F542; --on-green: #0A3443;
  --paper: rgba(255,255,255,.35);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 2.2vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07222D; --ink: #DCEEF3; --ink-2: #86A9B4; --line: rgba(220,238,243,.16);
    --pink: #FF5CB8; --green: #C4F542;
    --paper: rgba(255,255,255,.05);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.75 var(--mono); -webkit-font-smoothing: antialiased; padding: 0 var(--gutter) 80px; }
a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink); }
::selection { background: var(--pink); color: #fff; }
mark { background: var(--green); color: var(--on-green); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.top { display: flex; justify-content: space-between; align-items: baseline; padding: 26px 0 0; }
.wordmark { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -.015em; line-height: 1; }
.top .nav { display: flex; gap: 32px; }
.top .nav a { font-family: var(--sans); font-weight: 500; font-size: 17px; letter-spacing: -.005em; line-height: 1; }
.top .nav a:hover { text-decoration: none; color: var(--pink); }

main { max-width: 1140px; }
.head { padding: 150px 0 56px; }
h1 { margin: 0; font-weight: 600; font-size: 32px; line-height: 1.3; letter-spacing: 0; }
.sub { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 400; }
.sub.place em { font-style: normal; color: var(--ink-2); }
.portrait figcaption { font-style: normal; }
.meta { margin: 22px 0 0; font-size: 15.5px; } .meta b { font-weight: 400; color: var(--pink); }
/* the head is split by the golden ratio, and so is the photo: 1.618 : 1, with the text's cap line on the photo's top edge */
.head.with-portrait { display: grid; grid-template-columns: 1.618fr 1fr; gap: 48px; align-items: start; }
.portrait { margin: 7px 0 0; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 6px; }
.portrait figcaption { margin: 10px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.lede { margin: 72px 0 0; max-width: 92ch; }
.lede p { margin: 0 0 1.75em; }

section { padding: 64px 0 0; }
h2 { margin: 0 0 28px; font-size: 15.5px; font-weight: 600; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 56px 1fr auto; gap: 0 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row .n { color: var(--pink); }
.row .t { font-weight: 600; }
.row .d { display: block; font-weight: 400; }
.row .r { color: var(--ink-2); white-space: nowrap; }
.row .x { grid-column: 2 / 4; max-width: 80ch; padding: 10px 0 8px; display: none; }
.row.is-open .x { display: block; }
.row .x p { margin: 0 0 1em; } .row .x p:last-child { margin: 0; }
.row .x .k { background: var(--green); color: var(--on-green); padding: 1px 6px; }

/* the CV: years where the numbers were */
.rows.cv .row { grid-template-columns: 120px 1fr auto; }
.rows.cv .n { white-space: nowrap; }
.after { margin: 20px 0 0; } .after a { border-bottom: 1px solid var(--line); } .after a:hover { text-decoration: none; border-color: var(--pink); color: var(--pink); }
@media (max-width: 720px) { .rows.cv .row { grid-template-columns: 1fr auto; } .rows.cv .n { grid-column: 1 / -1; } }

/* the plus */
.plus { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; display: inline-grid; place-items: center; width: 28px; height: 28px; position: relative; vertical-align: middle; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--ink); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.plus::before { width: 28px; height: 1px; } .plus::after { width: 1px; height: 28px; }
.plus[aria-expanded="true"]::after { transform: rotate(90deg); }
.plus:hover::before, .plus:hover::after { background: var(--pink); }
.plus:focus-visible { outline: 1px solid var(--pink); outline-offset: 4px; }

/* the measurements, as a table */
.conn { margin-top: 12px; }
.conn .line { max-width: 92ch; }
.conn .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(196,245,66,.35); margin: 0 10px 2px 0; }
table { border-collapse: collapse; width: 100%; max-width: 92ch; margin: 0; }
th, td { text-align: left; vertical-align: top; padding: 10px 24px 10px 0; border-top: 1px solid var(--line); font-weight: 400; }
th { color: var(--ink-2); width: 14ch; }
td.v { font-weight: 600; white-space: nowrap; }
td.v mark { font-weight: 600; }
td.h { color: var(--ink-2); }
tr:last-child th, tr:last-child td { border-bottom: 1px solid var(--line); }
.sample { color: var(--pink); }

footer { padding: 120px 0 0; display: flex; gap: 40px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; }
footer a:hover { color: var(--pink); }

@media (max-width: 720px) {
  .top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .top .nav { gap: 18px; } .wordmark { font-size: 20px; } .top .nav a { font-size: 16px; }
  .head { padding: 90px 0 40px; } h1, .sub { font-size: 24px; }
  .head.with-portrait { grid-template-columns: 1fr; gap: 28px; }
  .lede { margin-top: 48px; }
  .row { grid-template-columns: 40px 1fr auto; gap: 0 14px; }
  .row .rt { display: none; }   /* the date goes, the plus stays */
  th { width: 11ch; } td.h { display: none; }
  td.v { white-space: normal; overflow-wrap: anywhere; }
}

/* the landing's one line */
.conn .line a { border-bottom: 1px solid var(--line); } .conn .line a:hover { text-decoration: none; border-color: var(--pink); color: var(--pink); }
.crumb { margin: 0 0 18px; color: var(--ink-2); } .crumb a:hover { color: var(--pink); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .plus::before, .plus::after { transition: none; } }

/* ------------------------------------------------------------------ writing: list and prose */
.prose { max-width: 80ch; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 0 0 1.75em; }
.prose h2 { margin: 2.8em 0 .9em; font-size: 15.5px; font-weight: 600; }
.prose h3 { margin: 2.2em 0 .7em; font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
.prose a { border-bottom: 1px solid var(--line); } .prose a:hover { text-decoration: none; border-color: var(--pink); color: var(--pink); }
.prose code { font-size: .95em; }
.prose pre { padding: 16px 20px; border: 1px solid var(--line); overflow-x: auto; line-height: 1.6; background: var(--paper); }
.prose pre code { font-size: 14px; }
.prose blockquote { padding-left: 20px; border-left: 2px solid var(--line); color: var(--ink-2); }
.prose img { max-width: 100%; height: auto; display: block; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.post-meta { margin: -40px 0 56px; color: var(--ink-2); }