:root {
  --paper: #f6f7f9;
  --raised: #ffffff;
  --ink: #1a1d2e;
  --muted: #5b6175;
  --rule: #d5d9e2;
  --accent: #3346c7;
  --accent-soft: #e6e9fb;
  --ok: #1f7a55;
  --k-academic: #9a6700;
  --k-ai-for-proof: #7a3fb8;
  --k-software: #0e7490;
  --k-hardware: #b4432c;
  --k-cryptocurrency: #a0306e;
  --serif: "STIX Two Text", "STIX Two", Cambria, Georgia, serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12141c;
    --raised: #191c27;
    --ink: #e6e8ef;
    --muted: #9aa0b4;
    --rule: #2c3040;
    --accent: #95a2ff;
    --accent-soft: #252a4a;
    --ok: #5cc79a;
    --k-academic: #e0b25c;
    --k-ai-for-proof: #c49bf0;
    --k-software: #5ccbe0;
    --k-hardware: #f08a72;
    --k-cryptocurrency: #f08cc0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
}
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
code { font-size: .92em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.bar, main, footer { max-width: 68rem; margin: 0 auto; padding-inline: 1.5rem; }

.bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
}
.brand { font: 600 1.25rem var(--serif); color: var(--ink); text-decoration: none; }
.bar nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--accent); }

/* Hero: an inference rule, set like a paper's typing judgement. */
.hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--rule); }
.rule {
  margin: 0 0 3rem;
  display: inline-grid;
  font: 400 clamp(1.1rem, 3vw, 1.7rem)/1.3 var(--serif);
  max-width: 100%;
}
.premises { display: flex; flex-wrap: wrap; gap: .4em 2.5em; padding: 0 .4em .3em; }
.line {
  position: relative;
  height: 2px; background: var(--ink);
  transform-origin: left;
  animation: draw .7s .2s cubic-bezier(.6, 0, .2, 1) both;
}
.line .name {
  position: absolute; left: calc(100% + .5em); top: 50%; transform: translateY(-50%);
  font: .6em var(--sans); color: var(--muted);
  animation: appear .3s .9s both;
}
.conclusion {
  justify-self: center; padding: .3em .4em 0;
  color: var(--accent);
  animation: appear .5s .9s both;
}
@keyframes draw { from { transform: scaleX(0); } }
@keyframes appear { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .line, .line .name, .conclusion { animation: none; }
}

.intro { max-width: 40rem; }
h1 { font: 600 clamp(2rem, 5vw, 3rem)/1.1 var(--serif); margin: 0 0 1rem; letter-spacing: -.01em; }
.intro p { margin: 0 0 1rem; font: 1.13rem/1.6 var(--serif); }
.intro .stats { color: var(--muted); font: 1rem/1.5 var(--sans); }

/* Filters */
.board { padding-top: 2rem; }
.filters { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.search input {
  width: 100%; max-width: 32rem;
  font: inherit; color: var(--ink);
  background: var(--raised); border: 1px solid var(--rule); border-radius: 6px;
  padding: .65rem .85rem;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; padding: 0; }
#stacks, .seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg input, #stacks input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, #stacks span {
  display: inline-block; cursor: pointer; user-select: none;
  padding: .3rem .75rem; border: 1px solid var(--rule); border-radius: 999px;
  font-size: .92rem; background: var(--raised);
}
#stacks small, .counted small { color: var(--muted); font-size: .8em; margin-left: .3em; }
.seg input:checked + span, #stacks input:checked + span {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
#stacks input:checked + span small, .counted input:checked + span small { color: inherit; }
.seg input:focus-visible + span, #stacks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.shown, .undated { color: var(--muted); font-size: .92rem; margin: 0 0 .5rem; }

/* Job list: rows under rules, not cards. */
.jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-areas:
    "head where"
    "stack level"
    "domain checked"
    "details details";
  column-gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.job[hidden] { display: none; }
.job-head { grid-area: head; }
.company { margin: 0; color: var(--muted); font-size: .95rem; }
.kind { white-space: nowrap; margin-left: .5em; font-size: .85rem; }
.kind::before {
  content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .35em;
  border-radius: 50%; background: var(--kind, var(--muted)); vertical-align: .05em;
}
.kind-academic { --kind: var(--k-academic); }
.kind-ai-for-proof { --kind: var(--k-ai-for-proof); }
.kind-software { --kind: var(--k-software); }
.kind-hardware { --kind: var(--k-hardware); }
.kind-cryptocurrency { --kind: var(--k-cryptocurrency); }
.job h3 { margin: .1rem 0 .5rem; font: 600 1.3rem/1.3 var(--serif); }
.job h3 a { color: var(--ink); text-decoration: none; }
.job h3 a:hover { color: var(--accent); text-decoration: underline; }
.where { grid-area: where; margin: 0; font-size: .95rem; }
.remote { display: block; font-weight: 600; }
.remote-remote-worldwide { color: var(--ok); }
.level { grid-area: level; margin: 0; color: var(--muted); font-size: .95rem; }
.checked { grid-area: checked; margin: 0; color: var(--muted); font-size: .85rem; align-self: end; }
.stack, .domain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .35rem; }
.stack { grid-area: stack; }
.domain { grid-area: domain; margin-top: .4rem; }
.tool {
  font: .92rem/1.4 var(--serif);
  background: var(--accent-soft); color: var(--ink);
  padding: .05rem .5rem; border-radius: 3px;
}
.area { font-size: .88rem; color: var(--muted); }
.area + .area::before { content: "/ "; opacity: .6; }
.job details { grid-area: details; margin-top: .6rem; font-size: .95rem; }
.job summary { cursor: pointer; color: var(--accent); width: fit-content; }
.job dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .6rem 0 0; max-width: 46rem; }
.job dt { color: var(--muted); }
.job dd { margin: 0; }
.empty { padding: 2rem 0; color: var(--muted); }

.archive { padding: 3rem 0 1rem; }
.archive > details > summary { cursor: pointer; font: 600 1.15rem var(--serif); }
.archive > details > p { color: var(--muted); max-width: 40rem; }
.closed .job h3 a { color: var(--muted); }

footer { padding-block: 2rem 4rem; color: var(--muted); font-size: .95rem; border-top: 1px solid var(--rule); margin-top: 2rem; }
footer p { max-width: 44rem; }

@media (max-width: 720px) {
  .bar, main, footer { padding-inline: 1rem; }
  .hero { padding-top: 2rem; }
  .premises { flex-direction: column; }
  .job {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "where" "level" "stack" "domain" "checked" "details";
    row-gap: .35rem;
  }
  .remote { display: inline; margin-right: .4em; }
}