/* The blog: legal.css gives the tokens, themes, menu bar, paper and footer.
   This adds the display face for headings, article meta, the post list, figures, code blocks
   and the "try it" box. Colours come only from legal.css tokens so both themes keep AA contrast. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../fonts/BricolageGrotesque.ttf") format("truetype");
  font-weight:200 800;font-stretch:75% 100%;font-display:swap
}
:root{--display:"Bricolage Grotesque",var(--round)}

h1,h2,h3,.logo,.post-list a{font-family:var(--display)}
h1{font-size:clamp(34px,1.2rem + 2.6vw,56px);line-height:1.05;letter-spacing:-.025em}
h2{margin-top:40px}
h3{font-size:1.05em;font-weight:800;margin:24px 0 0}

/* small line above the h1: where you are, and what kind of page it is */
.crumbs{font-size:var(--s-small);color:var(--muted);margin:0 0 14px;font-weight:700}
.crumbs a{color:var(--muted)}
.meta{font-family:var(--display);font-size:var(--s-small);color:var(--muted);margin:16px 0 0;letter-spacing:.01em}

article p,article li{max-width:68ch}
article ol,article ul{margin:10px 0 0;padding-left:1.3em}
article li{margin-top:6px}
article li::marker{color:var(--accent);font-weight:800}
:root[data-theme="midnight"] article li::marker{color:var(--link)}

pre{background:var(--code);border-radius:16px;padding:16px 18px;margin:14px 0 0;overflow-x:auto;font-size:.84em;line-height:1.5}
pre code{background:none;padding:0;font-size:1em;overflow-wrap:normal;white-space:pre}
kbd{font-family:var(--mono);font-size:.85em;background:var(--code);border-radius:6px;padding:1px 6px;border-bottom:2px solid var(--muted)}

figure{margin:28px 0 0}
figure img{display:block;width:100%;height:auto;border-radius:20px;background:var(--code)}
figcaption{font-size:var(--s-small);color:var(--muted);margin-top:10px;max-width:60ch}

/* the list of posts on the blog home */
.post-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.post-list li{margin:0;padding:22px 24px;border-radius:24px;background:var(--ground)}
.post-list a{font-size:clamp(20px,1rem + .6vw,26px);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-decoration:underline;text-decoration-color:transparent}
@media (hover:hover){.post-list a:hover{color:var(--ink);text-decoration-color:currentColor}}
.post-list p{margin:8px 0 0;color:var(--muted);max-width:60ch}

/* the "try it" box at the end of each post */
.cta{margin:44px 0 0;padding:26px clamp(20px,4vw,32px) 28px;border-radius:24px;background:var(--ground)}
.cta h2{margin:0}
.cta p{max-width:60ch}
.cta .actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:18px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:800;text-decoration:none;padding:12px 22px;border-radius:999px;transition:transform 200ms var(--ease-out)}
@media (hover:hover){.btn:hover{color:var(--on-accent);transform:translateY(-2px)}}
.btn:active{transform:scale(.97)}
.small{font-size:var(--s-small);color:var(--muted)}

.related{margin-top:36px}
.disclaimer{font-size:var(--s-small);color:var(--muted);margin-top:28px}

@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn:active{transform:none}}