/* Guides: long-form pages on the 3Bit Digital system (design/3bit-digital.md). */
:root{--paper:#F4F4F1;--white:#fff;--ink:#0B0B0C;--slate:#4F4F55;--slate-2:#5E5E65;--line:#E1E1DC;--accent:#3A5CCC;
  --font-display:"Geist",system-ui,sans-serif;--font-mono:"Geist Mono",ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font-display);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{width:min(720px,100% - 32px);margin-inline:auto}
header.site{border-bottom:1px solid var(--line);background:var(--white)}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;padding:14px 0;width:min(1040px,100% - 32px)}
header.site a{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:.02em}
header.site nav a{font-weight:400;margin-left:1.2rem;font-size:.9rem;color:var(--slate)}
.crumbs{font:400 .75rem var(--font-mono);letter-spacing:.04em;color:var(--slate-2);margin:2.5rem 0 1rem}
.crumbs a{color:var(--slate-2)}
h1{font-weight:600;font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 1rem}
h2{font-weight:600;font-size:1.5rem;line-height:1.15;letter-spacing:-.03em;margin:2.5rem 0 .6rem;padding-top:1.2rem;border-top:1px solid var(--ink)}
.lede{font-size:1.15rem;color:var(--slate);margin:0 0 1rem}
.meta{font:400 .75rem var(--font-mono);color:var(--slate-2);margin-bottom:2rem}
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.6rem .6rem .6rem 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 .72rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--slate-2)}
ul,ol{padding-left:1.2rem}li{margin:.3rem 0}
.cta{margin:3rem 0;padding:1.5rem;background:var(--ink);color:#F4F4F1}
.cta p{margin:.2rem 0 1rem;color:#B4B4BA}.cta strong{font-size:1.2rem;font-weight:600;color:#F4F4F1}
.cta a{display:inline-block;background:#F4F4F1;color:var(--ink);text-decoration:none;padding:.6rem 1rem;font-weight:500;margin-right:.6rem}
.more{margin:2rem 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem}
footer.site{border-top:1px solid var(--line);padding:2rem 0;color:var(--slate-2);font-size:.85rem;margin-top:3rem}
.cards{list-style:none;padding:0;display:grid;gap:0}
.cards li{margin:0;border-top:1px solid var(--line);padding:1.1rem 0}
.cards a{font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none}
.cards p{margin:.25rem 0 0;color:var(--slate)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}