:root{
  --paper:#eee8da; --ink:#231f1a; --dim:#7a7468; --hair:#d8d0bd;
  --accent:#b4432f; --card:#f4efe4;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.75 Georgia,"Times New Roman",serif; }
.mono{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; }
main{ max-width:720px; margin:0 auto; padding:0 20px 80px; }
header{ padding:56px 0 8px; }
h1{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:15px; letter-spacing:.42em; font-weight:600;
  text-transform:uppercase; margin:0; }
h1 small{ display:block; letter-spacing:.18em; color:var(--dim);
  font-weight:400; margin-top:6px; font-size:11px;
  text-transform:none; }
h2{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin:56px 0 14px; font-weight:600; }
p{ margin:0 0 14px; }
nav.bar{ font-family:ui-monospace,Consolas,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; padding:18px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 18px; }
nav.bar a{ color:var(--dim); }
nav.bar a[aria-current]{ color:var(--accent); }
.rule{ border:0; border-top:1px solid var(--hair); margin:26px 0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.card{ background:var(--card); border:1px solid var(--hair);
  padding:18px 20px; margin:18px 0; }
.gradebar{ height:8px; background:var(--hair); position:relative;
  margin:10px 0 6px; }
.gradebar i{ position:absolute; inset:0 auto 0 0;
  background:var(--accent); }
.klabel{ font-size:11px; color:var(--dim); letter-spacing:.08em; }
/* the grade ladder: one pill per named grade, three states. Reached
   is filled, working is outlined in the accent, ahead is a ghost -
   so the shape of the climb reads before any word does. */
.pills{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 6px; }
.pill{ font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 8px; border:1px solid var(--hair); border-radius:9px;
  color:var(--dim); background:transparent; white-space:nowrap; }
.pill.reached{ background:var(--ink); border-color:var(--ink);
  color:var(--paper); }
.pill.working{ border-color:var(--accent); color:var(--accent);
  font-weight:600; }
.pill.ahead{ opacity:.55; }
/* what the work is FOR right now, as against how deep it has got */
.tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:1px 7px; border:1px solid var(--hair); border-radius:9px;
  color:var(--dim); margin-left:6px; white-space:nowrap; }
.tag.open{ border-color:var(--accent); color:var(--accent); }
.tag.push{ background:var(--accent); border-color:var(--accent);
  color:var(--paper); font-weight:600; }
.tag.kept{ border-color:var(--ink); color:var(--ink); }
/* a work card: the preview beside the facts, stacking on a phone.
   The preview is deliberately given real estate - it is the only
   thing on this page that shows what any of it is FOR. */
.card.work{ display:grid; grid-template-columns:220px 1fr;
  gap:18px; align-items:start; padding:16px; }
.card.work h3{ margin:0 0 6px; font-size:14px; letter-spacing:.04em; }
.card.work .prev{ display:block; width:100%; aspect-ratio:1/1;
  background:#000; border:1px solid var(--hair); object-fit:cover; }
.card.work .noprev{ display:flex; align-items:center;
  justify-content:center; color:var(--dim); font-size:11px;
  text-align:center; padding:8px; }
.card.work .workbody{ min-width:0; }
.card.work code{ font-size:11.5px; }
/* a catalogued work is dimmed, not hidden - it is part of the body of
   work, just not where donation is being pointed today. Lighter than
   the old queued treatment, because "not the priority" is a much
   weaker statement than "not open yet" and should not read as grey. */
.card.work.queued{ opacity:.86; }
.card.work.queued .prev{ filter:grayscale(.2); }
@media (max-width:620px){
  .card.work{ grid-template-columns:1fr; }
  .card.work .prev{ max-width:260px; }
}
table{ border-collapse:collapse; width:100%; font-size:13.5px; }
td,th{ text-align:left; padding:7px 10px 7px 0; vertical-align:top;
  border-bottom:1px solid var(--hair); }
th{ font-family:ui-monospace,Consolas,monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  font-weight:600; }
td.mono, .num{ font-family:ui-monospace,Consolas,monospace;
  font-size:12.5px; }
.dim{ color:var(--dim); font-size:13px; }
/* the credit board. Sorting is a button inside the header cell so
   it answers the keyboard as well as the mouse - the whole point
   of the page is that no one ordering is the right one, which is
   worth nothing if only a mouse can change it. */
.board th{ padding:0; }
.board th button{ font:inherit; color:inherit; letter-spacing:inherit;
  text-transform:inherit; background:none; border:0; cursor:pointer;
  padding:7px 10px 7px 0; width:100%; text-align:left; }
.board th button:hover{ color:var(--accent); }
.board th[aria-sort] button{ color:var(--ink); }
.board td{ font-variant-numeric:tabular-nums; }
.board td.who{ font-variant-numeric:normal; }
.board td i{ color:var(--dim); font-style:normal; font-size:12px; }
@media (max-width:640px){
  .board{ font-size:12px; }
  .board th button{ padding-right:6px; }
}
#recent{ font-size:12px; max-height:150px; overflow-y:auto; }
#recent div{ padding:2px 0; color:var(--dim); }
#recent b{ color:var(--ink); font-weight:600; }
.btn{ display:inline-block; border:1px solid var(--accent);
  padding:9px 18px; font-family:ui-monospace,Consolas,monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.next{ margin-top:56px; font-family:ui-monospace,Consolas,monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.next a{ border-bottom:1px solid var(--accent); }
.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
.twocol h2{ margin-top:26px; }
@media (max-width:640px){ .twocol{ grid-template-columns:1fr; } }
.openq{ text-align:center; margin-top:64px;
  font-family:ui-monospace,Consolas,monospace; font-size:13px;
  letter-spacing:.2em; }
footer{ margin-top:80px; font-size:12px; color:var(--dim);
  border-top:1px solid var(--hair); padding-top:18px; }
footer .q{ font-family:ui-monospace,Consolas,monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; }