/* Blog additions. Loaded only on /blog/ pages, on top of style.css, and it uses
   that file's tokens rather than introducing a second palette. */

/* padding-top/bottom, not the shorthand: .blog-hero shares its element with
   .wrap, and the shorthand wiped out .wrap's 24px side padding, pinning the
   heading to the window edge. */
.blog-hero{padding-top:38px;padding-bottom:26px}

/* An article is one column of reading, so it gets a narrower wrap than the rest
   of the site. At the site's 1000px the 70ch measure sat left of centre with an
   empty half to its right, which read as a broken layout rather than a choice. */
.wrap.narrow{max-width:720px}
.blog-hero h1{font-family:var(--font-display);font-size:clamp(30px,5vw,46px);line-height:1.08;
              letter-spacing:-.01em;text-wrap:balance;margin-bottom:14px}
.blog-hero .lead{font-size:19px;color:var(--muted);max-width:62ch}
.blog-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:20px;
           font-family:var(--font-mono);font-size:12.5px;color:var(--faint);letter-spacing:.02em}
.blog-meta .dot{width:3px;height:3px;border-radius:99px;background:var(--faint)}

/* ---- article body ---- */
/* Left aligned, not centred: the h1 above sits at the left edge of .wrap and a
   centred column under it reads as a mistake. */
.prose{padding:14px 0 20px;font-size:17.5px;line-height:1.78}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--font-display);font-size:27px;line-height:1.25;color:var(--ink);
          margin-top:2em;letter-spacing:-.005em}
.prose h3{font-size:19.5px;line-height:1.35;color:var(--ink);margin-top:1.7em}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.45em}
.prose a{color:var(--a1);text-decoration:underline;text-underline-offset:3px;
         text-decoration-color:color-mix(in srgb,var(--a1) 45%,transparent)}
.prose a:hover{text-decoration-color:var(--a1)}
.prose a:focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:3px}

.prose code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-2);
            border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ink)}
.prose pre{background:var(--surface);border:1px solid var(--line);border-radius:11px;
           padding:16px 18px;overflow-x:auto;font-size:14px;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--ink)}

.prose blockquote{border-left:3px solid var(--a1);padding-left:18px;color:var(--muted);font-style:italic}

.prose figure{margin-top:2em;margin-bottom:2em}
.prose figure img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.prose figcaption{font-size:14.5px;color:var(--muted);margin-top:11px;line-height:1.55}
/* Diagrams carry small labels, so they break out past the text on a wide screen.
   Gated at 1060px: any narrower and the wider figure would push the page
   sideways. */
@media (min-width:1060px){
  .prose figure{width:132%;margin-left:-16%}
}

/* Tables get their own scroller so the page body never moves sideways. */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:11px;margin-top:1.6em}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prose thead th{background:var(--surface-2);color:var(--ink);font-weight:600;white-space:nowrap}
.prose tbody tr:last-child td{border-bottom:0}
.prose td{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- recommendation card ----
   It owns its accent. Several themes set a blanket a{color:...!important}, which
   beats a normal rule at any specificity and would print link-coloured text on
   the button's own background. Learned the hard way on numroq.com. */
.rec-card{--rc:#f0a83a;--rc-ink:#241703;
          margin:2.4em 0;padding:24px;border:2px solid var(--rc);border-radius:15px;
          background:linear-gradient(180deg,rgba(240,168,58,.11),rgba(240,168,58,.02)),var(--surface);
          text-align:center}
.rec-card .badge{display:inline-block;background:var(--rc);color:var(--rc-ink);font-weight:700;
                 font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
                 padding:4px 12px;border-radius:20px}
.rec-card h3{font-family:var(--font-display);font-size:23px;color:var(--ink);margin:12px 0 10px}
.rec-card p{color:var(--muted);max-width:56ch;margin:0 auto 14px;font-size:16px;line-height:1.65}
.rec-card ul{list-style:none;padding:0;margin:0 auto 18px;max-width:54ch;
             display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}
.rec-card li{position:relative;padding-left:22px;font-size:14.5px;color:var(--muted);text-align:left}
.rec-card li::before{content:"";position:absolute;left:4px;top:.45em;width:9px;height:5px;
                     border-left:2px solid var(--rc);border-bottom:2px solid var(--rc);
                     transform:rotate(-45deg)}
.rec-card .rc-btn,.prose .rec-card a.rc-btn{display:inline-block;background:var(--rc);
                 color:var(--rc-ink)!important;font-weight:700;padding:12px 26px;border-radius:30px;
                 text-decoration:none;font-size:15px;
                 transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.rec-card .rc-btn:hover{filter:brightness(1.06);transform:translateY(-1px);
                        box-shadow:0 8px 20px rgba(240,168,58,.26)}
.rec-card .rc-btn:focus-visible{outline:3px solid var(--rc);outline-offset:3px}
.rec-card .note{font-size:13px;color:var(--faint);margin:14px auto 0;max-width:54ch}

.disclosure{border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
            padding:13px 17px;font-size:14.5px;color:var(--muted);margin-bottom:.4em}

/* ---- listing ---- */
.post-list{display:grid;gap:16px;margin-top:26px}
.post-card{display:block;background:var(--surface);border:1px solid var(--line);
           border-radius:14px;padding:22px 24px;transition:border-color .15s ease,transform .15s ease}
.post-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.post-card:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.post-card h2{font-family:var(--font-display);font-size:23px;line-height:1.3;color:var(--ink);
              margin-bottom:8px;letter-spacing:-.005em}
.post-card p{color:var(--muted);font-size:16px;line-height:1.6}
.post-card .when{font-family:var(--font-mono);font-size:12px;color:var(--faint);
                 letter-spacing:.03em;margin-top:12px;display:block}

.next-read{margin-top:2.6em;border-top:1px solid var(--line);padding-top:24px}
.next-read .kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--faint);margin-bottom:10px}

@media (prefers-reduced-motion:reduce){
  .rec-card .rc-btn,.post-card{transition:none}
  .rec-card .rc-btn:hover,.post-card:hover{transform:none}
}