:root{
  --ground:#221f3a;
  --raised:#2a2646;
  --paper:#efeae1;
  --paper-2:#b3adc4;
  --paper-3:#8079a0;
  --rule:#3a3560;
  --sure:#8fbfa4;
  --soft:#e08a6d;
  --disp:"Syne",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --measure:62ch;
}

*{box-sizing:border-box}
[hidden]{display:none!important}


body{margin:0;background:var(--ground);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:300;
  -webkit-text-size-adjust:100%}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 44px}

.skip{position:absolute;left:-9999px;background:var(--soft);color:#1a1730;padding:.6rem 1rem}
.skip:focus{left:1rem;top:1rem;z-index:10}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

a{color:var(--soft);text-underline-offset:2px}
a:hover{color:#f0a88a}

/* ---------- header ---------- */
header{padding:56px 0 26px}
.hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start}

h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5.4vw,66px);
  line-height:.98;letter-spacing:-.032em;margin:0}

.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-3);margin-top:18px}

.lede p{margin:0 0 12px;font-size:18px;line-height:1.55;color:var(--paper-2);max-width:52ch}
.lede .dim{font-size:16px;color:var(--paper-3)}
.dim{color:var(--paper-2)}
.small{font-size:14px}

.langs{display:flex;gap:14px;margin-top:20px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.langs a{color:var(--paper-3);text-decoration:none}
.langs a:hover{color:var(--soft);text-decoration:underline}
.langs [aria-current]{color:var(--paper)}

/* ---------- filter ---------- */
.filter{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px}
.filter button{font:inherit;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  background:transparent;color:var(--paper-3);border:1px solid var(--rule);
  padding:3px 11px;cursor:pointer;border-radius:2px}
.filter button:hover{border-color:var(--soft);color:var(--soft)}
.filter button.on{background:var(--paper);border-color:var(--paper);color:var(--ground)}

/* ---------- the certainty axis ---------- */
.axis{position:relative;padding:22px 0 40px}
.spine{position:absolute;left:212px;top:0;bottom:56px;width:1px;
  background:linear-gradient(to bottom,var(--sure) 0%,var(--rule) 48%,var(--soft) 100%)}

.band{display:grid;grid-template-columns:184px 44px minmax(0,1fr);align-items:start;padding:14px 0 24px}
.tier{text-align:right;padding-top:3px}
.tier b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:500}
.tier span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--paper-3)}

.node{position:relative;height:16px}
.node i{position:absolute;left:22px;top:5px;width:11px;height:11px;margin-left:-5px;
  border-radius:50%;border:2px solid var(--ground)}

.live b{color:var(--sure)} .live .node i{background:var(--sure)}
.measured b{color:#b8cfd8} .measured .node i{background:#b8cfd8}
.review b{color:var(--paper-2)} .review .node i{background:var(--paper-3)}
.described b{color:#c9a6b8} .described .node i{background:#c9a6b8}
.open b{color:var(--soft)} .open .node i{background:var(--soft)}

.stack{display:flex;flex-direction:column;gap:30px}

/* ---------- an entry ---------- */
.entry .src{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper-3);margin-bottom:9px}
.entry h3{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.24;
  letter-spacing:-.015em;margin:0 0 9px;max-width:40ch}
.entry p{margin:0 0 10px;color:var(--paper-2);font-size:15.5px;line-height:1.62;max-width:var(--measure)}
.entry .tech{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--paper-3);margin:10px 0}

.cut{border-left:2px solid var(--soft);padding-left:16px;margin-top:13px;max-width:58ch}
.cut b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);margin-bottom:5px;font-weight:500}
.cut p{margin:0;font-size:14.5px;color:var(--paper-2)}

/* ---------- tables ---------- */
.tbl{margin:14px 0}
.tbl figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-3);margin-bottom:7px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;font-size:14px;min-width:340px}
th,td{text-align:right;padding:5px 16px 5px 0;border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px;font-weight:400}
thead th{color:var(--paper-3);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
th[scope=row]{text-align:left;color:var(--paper);padding-right:34px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}

/* ---------- blocks ---------- */
.block{border-top:1px solid var(--rule);padding:26px 0 8px;margin-top:10px}
.block h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-3);font-weight:500;margin:0 0 16px}
.blurb{color:var(--paper-2);max-width:var(--measure);margin:0 0 18px;font-size:15.5px}

.paper{padding:0 0 20px}
.paper h3{font-family:var(--disp);font-weight:600;font-size:18px;line-height:1.32;
  margin:0 0 6px;max-width:52ch}
.paper h3 .ttl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--paper-3);font-weight:400;margin-top:4px;text-transform:uppercase}
.authors{font-size:14.5px;color:var(--paper-2);margin:0 0 3px;max-width:var(--measure)}
.venue{font-family:var(--mono);font-size:11px;color:var(--paper-3);margin:0 0 4px}
.status{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin:0}

.btn{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--soft);color:var(--soft);
  padding:8px 20px;border-radius:2px}
.btn:hover{background:var(--soft);color:var(--ground)}

.nomatch{color:var(--paper-3);font-style:italic;padding:20px 0 40px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);background:#1d1a33;margin-top:30px;padding:30px 0 60px}
footer h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-3);font-weight:500;margin:0 0 12px}
footer p{color:var(--paper-2);max-width:var(--measure);font-size:15px;margin:0 0 10px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hgrid{grid-template-columns:1fr;gap:26px}
  .spine{left:5px}
  .band{grid-template-columns:24px minmax(0,1fr);gap:0}
  .tier{grid-column:2;text-align:left;padding:0 0 12px}
  .node{grid-column:1;grid-row:1/3}
  .node i{left:5px}
  .stack{grid-column:2}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- wide: pair the claim with its limit side by side ---------- */
@media (min-width:1100px){
  .tier{position:sticky;top:26px}
  .entry{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:6px 40px;align-items:start;grid-auto-rows:min-content}
  .entry .src,.entry h3{grid-column:1/-1}
  .entry h3{max-width:34ch}
  .entry > p,.entry .tbl,.entry .tech{grid-column:1;max-width:none}
  .cut{grid-column:2;grid-row:3;margin-top:0;max-width:none}
}

.links{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- languages ---------- */
.langlist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.langlist li{display:flex;gap:9px;align-items:baseline}
.langlist b{font-family:var(--disp);font-weight:600;font-size:16px}
.langlist span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-3)}

@media (max-width:820px){
}

.ctx{font-size:14px;color:var(--paper-3);margin:6px 0 0;max-width:60ch;
  border-left:1px solid var(--rule);padding-left:14px}

/* ---------- section rail ---------- */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;
  display:none;padding-left:20px}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:3px 0;color:var(--paper-3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.rail .dot{width:5px;height:5px;border-radius:50%;background:currentColor;
  flex-shrink:0;opacity:.5;transition:transform .22s ease,opacity .22s ease}
.rail .lbl{opacity:0;transform:translateX(4px);
  transition:opacity .22s ease,transform .22s ease,color .22s ease;white-space:nowrap}
.rail:hover .lbl{opacity:1;transform:none}
.rail a:hover{color:var(--paper)}
.rail a:hover .dot{opacity:1;transform:scale(1.5)}
.rail a:focus-visible{outline:1px solid var(--soft);outline-offset:3px}
.rail a[aria-current]{color:var(--soft)}
.rail a[aria-current] .dot{opacity:1;transform:scale(1.9);background:var(--soft)}
.rail a[aria-current] .lbl{opacity:1;transform:none}

.rail-track{position:absolute;left:6px;top:4px;bottom:4px;width:1px;background:var(--rule)}
.rail-fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(to bottom,var(--sure),var(--soft));
  transition:height .28s cubic-bezier(.4,0,.2,1)}

@media (min-width:1220px){ .rail{display:block} }
@media (prefers-reduced-motion:reduce){
  .rail .dot,.rail .lbl,.rail-fill{transition:none}
}

/* ---------- cross-references between entries ---------- */
.rel{margin:12px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-3);display:flex;flex-wrap:wrap;gap:8px;
  align-items:baseline;max-width:none}
.rel span{opacity:.7}
.rel a{color:var(--paper-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.rel a:hover{color:var(--soft);border-bottom-color:var(--soft)}
.entry .rel{grid-column:1/-1}
:target{scroll-margin-top:24px}
.entry:target h3,.paper:target h3{color:var(--soft)}

/* the rail must not sit on top of the text */
@media (min-width:1220px){
  .wrap{max-width:1210px;margin-right:auto;margin-left:auto}
  body{padding-right:74px}
  footer .wrap{max-width:1210px}
}
.rel{font-size:9px;letter-spacing:.08em;opacity:.85}
.rel a{border-bottom-color:var(--paper-3)}

/* ============ headings: make them findable ============ */
.block h2{
  font-family:var(--disp);font-size:17px;font-weight:700;
  letter-spacing:.02em;text-transform:none;color:var(--paper);
  margin:0 0 18px;display:flex;align-items:center;gap:14px}
.block h2::after{content:"";flex:1;height:1px;background:var(--rule)}

.entry h3{font-size:23px;line-height:1.2;margin-bottom:11px}
.entry h3::before{content:"";display:inline-block;width:16px;height:2px;
  vertical-align:middle;margin-right:11px;margin-top:-3px;background:var(--tint,var(--paper-3));opacity:.9}
.live .entry h3{--tint:var(--sure)}
.measured .entry h3{--tint:#b8cfd8}
.review .entry h3{--tint:var(--paper-2)}
.described .entry h3{--tint:#c9a6b8}
.open .entry h3{--tint:var(--soft)}

.tier b{font-size:11px;letter-spacing:.17em}
.paper h3{font-size:19px}

/* ============ links inside sentences ============ */
.wl{color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--soft);padding-bottom:1px}
.wl:hover{color:var(--soft);border-bottom-width:2px}

/* the leftover "from" line on papers — quiet, small, sentence case */
.rel{margin:8px 0 0;font-family:var(--body);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--paper-3);gap:6px;opacity:1}
.rel span{opacity:.75;font-style:italic}
.rel a{color:var(--paper-2);border-bottom:1px solid var(--rule);font-size:13px}

/* ============ scroll cue ============ */
.cue{display:flex;align-items:center;gap:14px;margin:38px 0 4px;
  text-decoration:none;color:var(--paper-3);
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  transition:opacity .45s ease,color .2s ease}
.cue i{flex:1;height:1px;background:linear-gradient(to right,var(--rule),transparent)}
.cue svg{flex-shrink:0;animation:nudge 2.2s ease-in-out infinite}
.cue:hover{color:var(--soft)}
.cue:hover svg{animation-play-state:paused}
.cue[data-gone]{opacity:0;pointer-events:none}
@keyframes nudge{
  0%,100%{transform:translateY(-3px);opacity:.45}
  50%{transform:translateY(4px);opacity:1}
}
@media (prefers-reduced-motion:reduce){ .cue svg{animation:none;opacity:.85} }

/* ============ rail: make it legible, not a secret ============ */
.rail{padding:14px 4px 14px 22px;background:color-mix(in srgb,var(--ground) 82%,transparent);
  border-radius:2px}
@supports not (background:color-mix(in srgb,red 50%,blue)){ .rail{background:#221f3ad9} }
.rail a{font-size:9.5px;color:var(--paper-2);padding:4px 0}
.rail .dot{width:6px;height:6px;opacity:.75}
.rail .lbl{opacity:.9;transform:none}
.rail a:hover{color:var(--paper)}
.rail a[aria-current]{color:var(--soft);font-weight:500}
.rail a[aria-current] .dot{transform:scale(1.8);box-shadow:0 0 0 4px rgba(224,138,109,.16)}
.rail-track{left:8px;width:2px;background:var(--rule);border-radius:2px}
.rail-fill{border-radius:2px}
@media (min-width:1220px) and (max-width:1439px){
  .rail .lbl{opacity:0}
  .rail:hover .lbl{opacity:1}
}

/* rail groups */
.rail li.grp{margin:12px 0 3px}
.rail li.grp:first-child{margin-top:0}
.rail li.grp span{display:block;padding-left:20px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-3);opacity:.65}
@media (prefers-reduced-motion:reduce){ .rail-fill{transition:none} }