:root{
  --paper:#FBFAF8;
  --panel:#F4F2EE;
  --ink:#1A1916;
  --muted:#6B6862;
  --rule:#E4E0D9;
  --hair:#EFECE6;
  --bar:#CFCAC0;
  --accent-base:#2C5FA8;
  --accent:var(--accent-base);
  --measure:34rem;
}
html[data-theme="dark"]{
  --paper:#161513;
  --panel:#1F1E1B;
  --ink:#EDEAE3;
  --muted:#96918A;
  --rule:#33302B;
  --hair:#26241F;
  --bar:#413D37;
  --accent:color-mix(in oklab, var(--accent-base) 46%, #F2EFE9);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --paper:#161513;
    --panel:#1F1E1B;
    --ink:#EDEAE3;
    --muted:#96918A;
    --rule:#33302B;
    --hair:#26241F;
    --bar:#413D37;
    --accent:color-mix(in oklab, var(--accent-base) 46%, #F2EFE9);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.shell{max-width:64rem;margin:0 auto;padding:0 2rem}

/* --- header --- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.75rem 0;border-bottom:1px solid var(--hair);
}
.mono,.eyebrow,.rail-label,.bar a,.bar span{font-family:"IBM Plex Mono",ui-monospace,monospace}
.bar a.wordmark{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.bar a.wordmark:hover{color:var(--ink)}
.bar .right{display:flex;align-items:center;gap:1.5rem}
.bar .role{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.theme{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:transparent;
  border:1px solid var(--rule);border-radius:2px;padding:.4rem .6rem;cursor:pointer;line-height:1;
}
.theme:hover{border-color:var(--muted);color:var(--ink)}

/* --- shared two-column grid --- */
.row{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:0 4rem}
.rail-label{
  font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0;padding-top:.4rem;
}

/* --- index --- */
.lede{padding:6rem 0 5rem;border-bottom:1px solid var(--hair)}
.lede .rail-label{padding-top:.9rem;text-transform:none;letter-spacing:.05em}
.lede h1{
  font-family:Newsreader,Georgia,serif;font-weight:300;font-size:2.75rem;line-height:1.18;
  letter-spacing:-0.015em;margin:0 0 2rem;max-width:30ch;text-wrap:pretty;
}
.lede p{margin:0 0 1rem;max-width:36rem;color:var(--muted)}
.lede p:last-child{margin:0}

.work{padding:4rem 0 0}
.item{padding:3.25rem 0;border-bottom:1px solid var(--hair)}
.item:first-child{padding-top:0}
.item:last-child{padding-bottom:4rem;border-bottom:0}
.figure{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:4rem;font-weight:400;line-height:1;
  letter-spacing:-0.04em;font-variant-numeric:tabular-nums;margin:0 0 .75rem;
}
.figure small{font-size:1.75rem;letter-spacing:0;color:var(--muted);padding:0 .35rem}
.caption{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0 0 2rem;
}
.item h3{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.3;margin:0 0 .6rem}
.item h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.item h3 a:hover{color:var(--accent);border-color:var(--accent)}
.item p{margin:0 0 2rem;max-width:36rem;color:var(--muted)}

/* diagrams */
.bars{display:grid;gap:.55rem;max-width:30rem}
.bars .b{
  display:grid;grid-template-columns:5.5rem 1fr 3.5rem;align-items:center;gap:.9rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;color:var(--muted);
}
.bars .b i{display:block;height:8px;background:var(--bar);border-radius:1px}
.bars .b.now i{background:var(--accent)}
.bars .b b{text-align:right;color:var(--ink);font-weight:400}
.bars .key{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding-top:.15rem;
}
.ticks{display:flex;flex-wrap:wrap;gap:1px;max-width:30rem;padding-bottom:.7rem}
.ticks i{width:5px;height:5px;display:block;background:var(--bar);opacity:.65}
.ticks i.hit{background:var(--accent);opacity:1}
.flow{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;max-width:34rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;color:var(--muted);
}
.flow .node{border:1px solid var(--rule);padding:.4rem .6rem;border-radius:2px;color:var(--ink)}
.flow .node.on{border-color:var(--accent);color:var(--accent)}

/* stack + elsewhere */
.block{padding:4rem 0 4.5rem;border-top:1px solid var(--hair)}
.stack{margin:0;display:grid;gap:1.5rem;max-width:38rem}
.stack>div{display:grid;gap:.5rem}
.stack dt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.stack dd{margin:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem}
.stack dd span{border:1px solid var(--rule);border-radius:2px;padding:.25rem .5rem}

.links{display:grid;gap:.9rem;max-width:38rem;margin:0 0 3rem}
.links>div{display:grid;grid-template-columns:7rem 1fr;gap:0 2rem}
.links dt{
  color:var(--muted);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;
  letter-spacing:.05em;text-transform:uppercase;padding-top:.2rem;
}
.links dd{margin:0}
.note{margin:0;padding-top:1.5rem;border-top:1px solid var(--hair);color:var(--muted);font-size:.9375rem;max-width:var(--measure)}

/* --- case study --- */
.case-hero{padding:4.5rem 0 2.5rem;border-bottom:1px solid var(--hair)}
.case-hero .rail-label{padding-top:.9rem}
.back{color:var(--muted);text-decoration:none;letter-spacing:.05em}
.back:hover{color:var(--accent)}
.eyebrow{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem}
.case-hero h1{
  font-family:Newsreader,Georgia,serif;font-weight:300;font-size:2.5rem;line-height:1.2;
  letter-spacing:-0.015em;margin:0 0 1.5rem;max-width:24ch;text-wrap:pretty;
}
.case-hero .standfirst{
  font-family:Newsreader,Georgia,serif;font-size:1.375rem;font-weight:400;line-height:1.45;
  margin:0 0 2.5rem;max-width:var(--measure);color:var(--muted);
}
.case-hero .standfirst strong{font-weight:400}
.metrics{display:flex;flex-wrap:wrap;gap:2.5rem;padding:1.5rem 0 0;border-top:1px solid var(--hair)}
.metrics .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums}
.metrics .l{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:.5rem;
}

.case-body{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:0 4rem;padding:3.5rem 0 6rem}
.rail{position:sticky;top:2rem;align-self:start;display:grid;gap:.7rem;font-family:"IBM Plex Mono",ui-monospace,monospace}
.rail h2{
  font-size:.6875rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0;padding-bottom:.3rem;
}
.rail h2+h2,.rail .sep{padding-top:1.5rem;border-top:1px solid var(--hair);margin-top:.8rem}
.rail a{font-size:.8125rem;color:var(--muted);text-decoration:none}
.rail a:hover{color:var(--accent)}
.rail .list{font-size:.8125rem;line-height:1.9;color:var(--ink)}

.prose{max-width:var(--measure);font-size:1.0625rem;line-height:1.65}
.prose h2{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.625rem;letter-spacing:-0.01em;margin:3rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1rem;font-weight:600;margin:2rem 0 .5rem}
.prose p{margin:0 0 1.15rem}
.prose ul{padding-left:1.1rem;margin:0 0 1.15rem}
.prose li{margin-bottom:.5rem}
.prose strong{font-weight:600}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.5rem 0}
.prose code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em;background:var(--panel);padding:.1em .35em;border-radius:3px}
.prose em{font-style:italic}

/* results list: numbered, ruled off the margin */
.prose h2+ul{list-style:none;padding:0;margin:0 0 1.15rem;display:grid;gap:.9rem;counter-reset:r}
.prose h2+ul>li{
  counter-increment:r;display:grid;grid-template-columns:1.25rem 1fr;gap:.5rem;margin:0;
}
.prose h2+ul>li::before{
  content:counter(r,decimal-leading-zero);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;color:var(--muted);padding-top:.35rem;
}

/* "what I would change" notes */
.prose .rev{border-left:1px solid var(--rule);padding-left:1.25rem;margin:0 0 .9rem}
.prose .rev.lead{margin-top:1.75rem}
.prose h2+.rev.lead{margin-top:1.25rem}

/* tables */
.prose table{border-collapse:collapse;width:100%;margin:2.25rem 0;font-size:.875rem;background:var(--panel);border-radius:3px}
.prose th,.prose td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--hair)}
.prose tr:last-child td{border-bottom:0}
.prose th{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.prose td:not(:first-child){font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.prose td:nth-child(2){color:var(--muted)}

/* --- scroll reveal --- */
[data-reveal]{opacity:1}
.js [data-reveal].pending{opacity:0;transform:translateY(14px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal].pending{opacity:1;transform:none}
  [data-reveal].in{transition:none}
}

/* --- narrow --- */
@media (max-width:52rem){
  .shell{padding:0 1.25rem}
  .row,.case-body{grid-template-columns:1fr;gap:1rem}
  .rail{position:static;padding-bottom:2.5rem;border-bottom:1px solid var(--hair);margin-bottom:2.5rem}
  .lede{padding:3.5rem 0 3rem}
  .lede h1{font-size:2rem}
  .case-hero{padding:3rem 0 2rem}
  .case-hero h1{font-size:1.875rem}
  .case-hero .standfirst{font-size:1.1875rem}
  .figure{font-size:2.75rem}
  .figure small{font-size:1.25rem}
  .metrics{gap:1.5rem 2rem}
  .bar .role{display:none}
}