:root {
  --bg: #0b0d12; --panel: #10131a; --border: #1e2430; --border-faint: #151a24;
  --text: #c3cad6; --bright: #eef1f6; --muted: #8a93a5; --faint: #5d6575;
  --control: #3a4254;
  --prose: #aeb6c4; /* essay body: a step dimmer than --text so long reads don't glare */
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --measure: 78ch;
}
* { box-sizing: border-box; margin: 0; }
/* default scale matches one browser zoom step (110%) — Ezra prefers the roomier look */
:root { zoom: 1.1; }
body { background: var(--bg); color: var(--text); font: 16px/1.6 var(--mono); }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
header.site { border-bottom: 1px solid var(--border); }
header.site .wrap { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 20px; }
.wordmark { letter-spacing: .14em; color: var(--bright); font-size: 16px; }
.wordmark .suffix { color: var(--faint); }
nav.site a { color: var(--muted); margin-left: 22px; font-size: 13px; }
nav.site a:hover, nav.site a.active { color: var(--bright); }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.faint { color: var(--faint); } .muted { color: var(--muted); } .bright { color: var(--bright); }
main { padding: 26px 0 60px; }
.prose { max-width: var(--measure); font-size: 17px; line-height: 1.75; color: var(--prose); }
.prose p { margin: 0 0 16px; }
.prose a { color: var(--text); border-bottom: 1px solid var(--control); }
.prose a:hover { color: var(--bright); border-bottom-color: var(--bright); }
.prose h1, .prose h2, .prose h3 { color: var(--bright); font-weight: 600; margin: 28px 0 12px; }
.prose h1 { font-size: 24px; } .prose h2 { font-size: 19px; } .prose h3 { font-size: 17px; }
.prose blockquote { border-left: 2px solid var(--control); padding-left: 14px; color: var(--muted); margin: 0 0 16px; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 38px 0; }
.slowclap-widget { margin: 34px 0 6px; }
/* widget injects its own defaults after our sheet — article.prose wins on specificity */
article.prose .slowclap-widget {
  --slowclap-bg: var(--prose);            /* unclapped: essay text color */
  --slowclap-clapped-bg-start: var(--text);
  --slowclap-clapped-bg-end: var(--text); /* clapped: link color, a step lighter */
  --slowclap-accent: var(--bg);           /* icon/outline/progress: page background */
  --slowclap-text: var(--bg);             /* label needs dark-on-light contrast */
  --slowclap-font: var(--mono);
}
/* essay page: room between the site header and the piece */
article.prose { margin-top: 44px; }
/* the italic opener (first paragraph after the title) reads as front-matter, not body */
.prose h1 + p { color: var(--muted); font-size: 16px; }
/* everything after the final rule (corpus / world context / method) is apparatus, not essay */
.prose hr:last-of-type ~ * { color: var(--muted); font-size: 15px; }
.prose hr:last-of-type ~ * a { color: inherit; }
table.rows { width: 100%; border-collapse: collapse; }
table.rows th { text-align: left; font-weight: normal; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); }
table.rows td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--border-faint); }
.btn { display: inline-block; border: 1px solid var(--control); border-radius: 3px;
  padding: 4px 12px; color: var(--bright); background: none; font: 13px var(--mono); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
input.text, textarea.text, select.text { background: var(--panel); border: 1px solid var(--control);
  border-radius: 4px; color: var(--bright); font: 14px var(--mono); padding: 8px 10px; width: 100%; }
.st { font-size: 12px; letter-spacing: .1em; }
.st-pending { color: var(--muted); } .st-pending::before { content: '○ '; }
.st-approved { color: var(--bright); } .st-approved::before { content: '◐ '; }
.st-published { background: var(--bright); color: var(--bg); padding: 1px 7px; border-radius: 2px; }
.st-declined { color: var(--faint); text-decoration: line-through; }
@media (max-width: 640px) { nav.site a { margin-left: 14px; } }
.stats { margin: 46px 0 0; }
.stats .stat-n { font-size: 44px; line-height: 1.1; color: var(--bright); letter-spacing: .01em; }
.stats .stat-k { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-top: 8px; }
.stats .stat-src { margin-top: 18px; font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; }
.stats .stat-src b { color: var(--text); font-weight: normal; }
.stats .stat-src .sep { color: var(--faint); margin: 0 10px; }
/* each source is atomic: pairs wrap whole, never label from count */
.stats .stat-src .src { white-space: nowrap; }
@media (max-width: 640px) {
  .stats .stat-src { column-gap: 14px; }
  .stats .stat-src .sep { display: none; }
}
/* header→stats gap is main padding (26) + stats margin (46) = 72; mirror it below */
.essays { margin-top: 72px; }
.essays > .label { margin-bottom: 12px; }
.essay-list { border-top: 1px solid var(--border); }
.essay-list a.row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--border-faint); }
.essay-list a.row .t { color: var(--bright); font-size: 17px; flex: 1; min-width: 0; }
.essay-list a.row .m { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap; }
.essay-list a.row:hover .t { text-decoration: underline; text-decoration-color: var(--control); }
.palette-backdrop { position: fixed; inset: 0; background: rgba(4, 5, 8, .55); display: none; z-index: 40; }
.palette-backdrop.open { display: block; }
.palette { position: fixed; top: 48px; left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px)); background: var(--panel); border: 1px solid #2a3140;
  border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); z-index: 41; padding: 14px 16px; }
.palette .irow { display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid #2a3140; padding-bottom: 10px; margin-bottom: 8px; }
.palette .scope { font-size: 12px; letter-spacing: .12em; border: 1px solid var(--control);
  padding: 1px 7px; border-radius: 2px; color: var(--muted); }
.palette .scope.hot { color: var(--bg); background: var(--bright); border-color: var(--bright); }
.palette input { flex: 1; background: none; border: none; outline: none;
  color: var(--bright); font: 15px var(--mono); }
.palette .quota { font-size: 12px; color: var(--faint); white-space: nowrap; }
.palette .rows { max-height: 55vh; overflow-y: auto; }
.palette .prow { display: block; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.palette .prow .meta { display: flex; justify-content: space-between; font-size: 12px;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.palette .prow .badge { border: 1px solid #2a3140; padding: 0 6px; border-radius: 2px; }
.palette .prow .txt { color: var(--text); font-size: 14px; line-height: 1.55; }
.palette .prow .t { color: var(--bright); font-size: 15px; }
.palette .action { display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 2px 2px; color: var(--bright); font-size: 14px; cursor: pointer; }
.palette .action:hover { text-decoration: underline; text-decoration-color: var(--control); }
.palette .note { color: var(--muted); font-size: 13px; padding: 10px 2px; }