/* ============================================================
   blog.css — long-form articles under /blog/.
   Extends site/site.css; every colour is a token so a palette
   change there, and the print block, reach the posts too.
   ============================================================ */
.post{max-width:var(--measure);margin:0 auto}
.post-hero{padding:clamp(56px,9vw,110px) 0 clamp(28px,4vw,44px)}
.post-hero h1{max-width:20ch}
.post-hero .lede{margin-top:22px}
.post-meta{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin-top:26px;
           font:500 13px/1.4 var(--mono);color:var(--faint)}
.post-meta b{color:var(--ink-2);font-weight:500}

.post h2{font:600 clamp(24px,3.2vw,30px)/1.25 var(--serif);letter-spacing:-.01em;
         text-transform:none;color:var(--ink);margin:clamp(44px,6vw,64px) 0 14px}
.post h2 .num{display:block;font:600 11px/1 var(--mono);letter-spacing:.24em;
              text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.post h3{font:600 20px/1.35 var(--sans);margin:34px 0 8px;color:var(--ink)}
.post p{color:var(--muted);margin-bottom:18px}
.post p strong,.post li strong{color:var(--ink)}
.post ul,.post ol{margin:0 0 20px 0;padding-left:0;list-style:none;counter-reset:li}
.post li{color:var(--muted);position:relative;padding-left:24px;margin-bottom:10px}
.post ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
                    border-radius:2px;background:var(--accent)}
.post ol li{counter-increment:li}
.post ol li::before{content:counter(li);position:absolute;left:0;top:1px;
                    font:600 12px/1.6 var(--mono);color:var(--accent)}
.post a{overflow-wrap:anywhere}
.post hr{border:0;border-top:1px solid var(--hair-soft);margin:44px 0}
.post .small{font-size:15px}

/* inline math-ish */
.math{font:italic 1em/1.5 Georgia,"Times New Roman",serif;color:var(--ink-2);white-space:nowrap}
.math .r{font-style:normal}

/* callout */
.aside{border-left:3px solid var(--accent);background:var(--accent-faint);border-radius:0 12px 12px 0;
       padding:16px 20px;margin:26px 0}
.aside p{margin:0;font-size:16px}
.aside p+p{margin-top:10px}
.aside.warn{border-color:var(--accent-2);
            background:color-mix(in srgb,var(--accent-2) 9%,transparent)}

/* code */
pre.code{font:400 13.5px/1.6 var(--mono);background:var(--dark);color:#e9edf2;border-radius:12px;
         padding:18px 22px;overflow-x:auto;margin:22px 0;tab-size:2;-moz-tab-size:2}
pre.code .k{color:#7fd1c6}pre.code .s{color:#e0a978}pre.code .c{color:#7d8a97;font-style:italic}
pre.code .n{color:#c9b3ff}
.post code{font-size:.88em}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.tbl th{font:600 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
        text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--hair)}
.tbl td{padding:10px 12px 10px 0;border-bottom:1px solid var(--hair-soft);color:var(--muted);
        vertical-align:top}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl .num{font:500 14px/1.5 var(--mono);color:var(--ink-2);white-space:nowrap;text-align:right}
.tbl th.num{text-align:right;font:600 11px/1.4 var(--sans);letter-spacing:.14em;color:var(--faint)}
.tbl .total td{border-bottom:0;border-top:2px solid var(--ink);color:var(--ink);font-weight:600}
.tbl .total td.num{color:var(--accent)}
.tbl-wrap{overflow-x:auto}

/* figures */
figure.fig{margin:30px 0;background:var(--card);border:1px solid var(--hair-soft);border-radius:16px;
           padding:22px 24px 18px;overflow:hidden}
figure.fig svg{width:100%;height:auto;display:block;font-family:var(--sans)}
figure.fig figcaption{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:14px;
                      padding-top:12px;border-top:1px solid var(--hair-soft)}
figure.fig figcaption b{color:var(--ink);font-weight:600}
.fig .mono{font-family:var(--mono)}

/* the live search box at the top of a post: one header line, the field, the chips, one footer line */
.demo{margin:26px 0 4px;background:var(--card);border:1px solid var(--accent);border-radius:14px;
      padding:14px 16px 12px;box-shadow:var(--shadow)}
.demo-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.post .demo-title{font:600 15px/1.3 var(--sans);letter-spacing:.01em;margin:0;color:var(--ink)}
.post .demo-lede{font-size:13.5px;margin:0;color:var(--muted)}
.demo .sp-field{box-shadow:none;border-radius:10px;padding:0 10px 0 12px;gap:9px}
.demo .sp-field > svg{width:16px;height:16px}
.demo #q{font-size:15px;padding:11px 0}
.demo .sp-examples{margin-top:10px;gap:6px}
.demo .sp-ex{font-size:12.5px;padding:5px 10px}
.demo .sp-skel{margin-top:10px}
.demo .sp-skel i{height:40px}
.demo-foot{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;margin-top:10px}
.post .demo-foot .sp-status{margin:0;font-size:12.5px;font-weight:500;flex:none}
.post .demo-note{font-size:12.5px;color:var(--faint);margin:0;flex:1 1 20ch;line-height:1.5}
/* the dropdown is a listbox, not prose: keep the article's bullets off it */
.post .sp-ac-list{margin:0;padding:6px}
.post .sp-ac-list li{padding-left:12px;margin:0;color:inherit}
.post .sp-ac-list li::before{content:none}
.post .sp-ac-list .sp-opt{padding:11px 12px}
@media (max-width:600px){
  .demo{padding:12px 12px 10px;border-radius:12px;margin:20px 0 0}
  .demo-head{gap:2px 8px;margin-bottom:8px}
  .post .demo-lede{font-size:12.5px}
  .demo #q{font-size:15px;padding:10px 0}
  .demo .sp-examples > span{display:none}
  .demo .sp-ex{font-size:12px;padding:5px 9px;max-width:100%;white-space:normal;text-align:left;line-height:1.25}
  .demo .sp-ac-list{max-height:min(55vh,380px)}
}

/* the receipt */
.receipt{margin:30px auto;max-width:400px;background:var(--card);color:var(--ink);
         font:400 13.5px/1.7 var(--mono);padding:24px 26px 20px;border-radius:4px;
         border:1px solid var(--hair);box-shadow:var(--shadow);position:relative}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:10px;
         background:radial-gradient(circle at 10px 0,transparent 6px,var(--card) 6.5px) 0 0/20px 10px}
.receipt::before{top:-9px;transform:scaleY(-1)}
.receipt::after{bottom:-9px}
.receipt h3{font:600 16px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;
            margin:0 0 4px;color:var(--ink)}
.receipt .sub{text-align:center;color:var(--faint);font-size:12px;margin:0 0 14px}
.receipt .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--hair)}
.receipt .row span:last-child{flex:none;color:var(--ink-2)}
.receipt .row.total{border-bottom:0;border-top:2px solid var(--ink);margin-top:8px;padding-top:6px;
                    font-weight:500}
.receipt .row.total span:last-child{color:var(--accent);font-weight:600}
.receipt .foot{text-align:center;color:var(--faint);font-size:11.5px;margin:14px 0 0;letter-spacing:.06em}

/* references */
.refs{font-size:14.5px}
.refs li{padding-left:34px;margin-bottom:12px}
.refs li::before{content:"[" counter(li) "]";left:0;top:0;width:auto;height:auto;border-radius:0;
                 background:transparent;font:500 12.5px/1.65 var(--mono);color:var(--accent)}

/* post list on /blog/ */
.post-list{margin-top:8px}
.post-list a{display:block;text-decoration:none;padding:26px 0;border-top:1px solid var(--hair-soft)}
.post-list a:last-child{border-bottom:1px solid var(--hair-soft)}
.post-list .when{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--faint);display:block;margin-bottom:9px}
.post-list h3{font:600 22px/1.3 var(--serif);color:var(--ink);letter-spacing:-.01em}
.post-list a:hover h3{color:var(--accent)}
.post-list p{color:var(--muted);font-size:16px;margin:8px 0 0;max-width:62ch}

@media (max-width:600px){
  figure.fig{padding:16px 14px 14px;border-radius:12px}
  pre.code{font-size:12.5px;padding:14px 16px}
  .receipt{font-size:12.5px;padding:20px 18px 16px}
}
@media print{
  figure.fig,.receipt{break-inside:avoid;box-shadow:none}
  pre.code{background:#fff;color:#000;border:.5pt solid #bbb}
  pre.code .k,pre.code .s,pre.code .n,pre.code .c{color:#000}
}