/* Blog reading rules. Loaded AFTER home.css, so every token (colours, both themes, shadows,
   Satoshi, the nav, chips, buttons, footer) comes from the live homepage. This file adds only
   what long text needs: a 68-character column, 19px body, calm headings, tables that scroll
   inside themselves on a phone. No mono, no HUD marks (DESIGN.md). */

.blog-main{padding-top:calc(72px + clamp(40px,7vw,88px));padding-bottom:clamp(40px,6vw,72px)}

/* ---------- index ---------- */
.blog-index{display:grid;gap:18px;justify-items:start}
.blog-index h1{font-weight:500;font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.03em;max-width:18ch}
.blog-index .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;width:100%;margin-top:22px}
.blog-index .card{display:grid;gap:12px;align-content:start;padding:28px;border-radius:var(--r);background:var(--card);box-shadow:var(--lift);text-decoration:none;transition:transform .2s}
.blog-index .card:hover{transform:translateY(-2px)}
.blog-index .card h2{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.blog-index .card p{color:var(--muted);font-size:16px;line-height:1.55}
.blog-index .card .more{color:var(--blue);font-weight:500;font-size:15px}
.blog-index .card .chip{justify-self:start}
.blog-index .empty{color:var(--muted)}

/* ---------- a post ---------- */
.dek{color:var(--muted);font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:60ch}
.post{max-width:720px;margin:0 auto}
.post .back{display:inline-block;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:26px}
.post .back:hover{color:var(--blue)}
.post h1{font-weight:500;font-size:clamp(34px,4.8vw,54px);line-height:1.06;letter-spacing:-.03em;margin-bottom:18px}
.post .meta{color:var(--muted);font-size:14px;margin:18px 0 8px;padding-bottom:26px;border-bottom:1px solid var(--faint)}

.prose{font-size:19px;line-height:1.65}
.prose>*+*{margin-top:1.1em}
.prose h2{font-weight:500;font-size:clamp(26px,3vw,32px);line-height:1.2;letter-spacing:-.02em;margin-top:1.9em}
.prose h3{font-weight:700;font-size:20px;margin-top:1.6em}
.prose a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.55em}
.prose strong{font-weight:700}
.prose .example{padding:20px 24px;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--lift);font-size:18px}
.prose .example small{display:block;color:var(--muted);font-size:15px;margin-top:8px}
.prose .note{color:var(--muted);font-size:15px;line-height:1.55;padding-top:22px;border-top:1px solid var(--faint)}
.prose .sources{font-size:15px;color:var(--muted)}
.prose .sources a{word-break:break-word}
.prose .cta-line{margin-top:1.6em}
.prose a.btn{color:var(--btn-ink);text-decoration:none}

/* tables scroll inside their own box on a phone; the page never scrolls sideways */
.prose .table{overflow-x:auto;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--lift)}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
.prose th,.prose td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--faint)}
.prose tr:last-child td{border-bottom:0}
.prose th{font-weight:700}
.prose td:first-child{font-weight:500}

.draft-banner{max-width:720px;margin:0 auto 26px;padding:12px 16px;border-radius:12px;background:#FFF4D6;color:#5C4300;font-size:14px;font-weight:500}
.draft-banner code{font-family:inherit;font-weight:700}

.blog-foot{padding-top:clamp(60px,8vw,100px)}

@media (max-width:600px){
  .prose{font-size:18px}
  .blog-index .card{padding:22px}
}

/* dark theme: CTA blue is too dim on the near-black ground for body links; use the soft blue */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prose a:not(.btn),
  :root:not([data-theme="light"]) .blog-index .card .more{color:var(--blue-soft)}
}
:root[data-theme="dark"] .prose a:not(.btn),:root[data-theme="dark"] .blog-index .card .more{color:var(--blue-soft)}