:root{
  --night:#121a16;
  --paper:#e7efe8;
  --ink:#152019;
  --soft:#3a4d42;
  --mist:#c5d4cb;
  --copper:#d4894a;
  --ember:#c45c32;
  --ember-ink:#a84826;
}
*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink)}
body{
  margin:0;
  font-family:"Manrope",sans-serif;
  font-size:16px;
  line-height:1.5;
}
::selection{background:var(--copper);color:var(--night)}
main,header.top,footer{max-width:960px;margin:0 auto;padding:0 20px}
header.top{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:28px;flex-wrap:wrap;
}
.mark{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.mark img{width:40px;height:40px;display:block}
.brand{
  font-family:"Instrument Serif",serif;
  font-size:28px;line-height:1;font-weight:400;letter-spacing:-.02em;color:var(--ink);
}
.brand em{font-style:italic;color:var(--ember-ink)}
header.top nav{display:flex;flex-wrap:wrap;gap:8px 18px}
header.top nav a{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;letter-spacing:.04em;
  color:var(--soft);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
}
header.top nav a:hover{color:var(--ink)}
h1{
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-size:clamp(36px,5vw,56px);
  line-height:1.15;
  letter-spacing:-.03em;
  text-wrap:balance;
  margin:32px 0 12px;
}
h2{
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-size:32px;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:48px 0 12px;
}
h3{
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:16px 0 6px;
}
p.lede{font-size:18px;max-width:62ch;margin:0 0 20px}
.muted{color:var(--soft)}
a{color:var(--ember-ink)}
a:hover{color:var(--ink)}
a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:8px 0 20px}
.legend span{display:inline-flex;align-items:baseline;gap:8px}
.tag{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;letter-spacing:.04em;
  color:var(--soft);
}
.tag.ready{color:var(--ember-ink)}
.group h2{display:block}
.group h2 small{font-family:"Manrope",sans-serif;font-size:16px;color:var(--soft)}
ul.cases{list-style:none;padding:0;margin:0}
ul.cases li{padding:14px 0;border-bottom:1px solid var(--mist);display:block}
ul.cases li .what{display:block}
ul.cases li a.what{color:var(--ink);text-decoration:none}
ul.cases li a.what:hover{color:var(--ember-ink)}
ul.cases li .note{display:block;margin-top:4px;color:var(--soft)}
ul.cases li.ready img{
  width:100%;height:auto;display:block;
  background:var(--night);
  margin:0 0 14px;
}
ul.cases li.ready .go{
  display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
  font-weight:600;text-underline-offset:4px;
}
.work{margin-top:8px}
.pair{display:grid;grid-template-columns:1fr;gap:48px;margin-top:8px}
.offer img{width:100%;height:auto;display:block;background:var(--night)}
.offer p{max-width:36ch;margin:0}
.offer > a{
  display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
  font-weight:600;text-underline-offset:4px;
}
figure{margin:18px 0 24px}
figure img{width:100%;height:auto;display:block;background:var(--night)}
figcaption{color:var(--soft);margin-top:8px;max-width:68ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px 24px;margin:8px 0 24px}
.facts b{
  display:block;
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-size:32px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.facts span{display:block;color:var(--soft);margin-top:4px}
.box{margin:20px 0;max-width:68ch}
.box.caution{color:var(--ink)}
ol.steps{padding-left:1.2em;max-width:68ch}
ol.steps li{margin:8px 0}
table{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0 20px}
th,td{border-bottom:1px solid var(--mist);padding:10px 8px;text-align:left;vertical-align:top}
th{font-weight:600}
.scroll{overflow-x:auto;max-width:100%}
.scroll table{width:max-content;min-width:100%}
main{min-width:0;width:min(960px,100%);overflow-x:clip}
.ask{margin:8px 0 28px}
.ask a{font-weight:600;font-size:17px}
.lead{display:grid;gap:48px;margin:8px 0 8px}
.lead h2{margin:14px 0 8px}
.lead p{max-width:42ch;margin:0}
.lead .metric{margin-top:10px;font-weight:600}
.lead > article > a{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:600}
.lead img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--night)}
.lead img.section{aspect-ratio:auto;object-fit:contain;height:auto}
.lead figure{margin:0 0 16px}
.group h2{font-size:26px;color:var(--soft);margin-top:32px}
.index{list-style:none;padding:0;margin:0;font-size:16px}
.index li{padding:10px 0;border-bottom:1px solid var(--mist)}
.index .later{color:var(--soft)}
.index .what{display:block}
.index .note{display:block;margin-top:4px}
@media(min-width:800px){
  .lead{grid-template-columns:1fr 1fr;gap:40px 36px;align-items:start}
}
code{font-family:"IBM Plex Mono",monospace;font-size:.92em}
footer{
  border-top:1px solid var(--mist);
  margin-top:56px;padding-top:20px;padding-bottom:48px;
  color:var(--soft);
}
footer a{color:var(--ember-ink)}
@media(max-width:700px){
  .pair,.grid2{grid-template-columns:1fr}
}