/* tdy blog — extends style.css (paper palette). Loaded after it. */

.bnav { padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.bnav .container { display: flex; align-items: center; justify-content: space-between; }

.post-list { max-width: 760px; margin: 0 auto; }
.post-card { display: block; text-decoration: none; color: inherit; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; margin-bottom: 12px;
  transition: border-color .18s, background .18s; }
.post-card:hover { border-color: rgba(15,169,142,.35); }
.post-card h2 { font-size: 22px; letter-spacing: -.02em; font-weight: 700; line-height: 1.25; }
.post-card p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.post-card .pmeta { margin-top: 12px; }
.pmeta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* article */
.article { max-width: 720px; margin: 0 auto; padding: 56px 0 40px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 22px; }
.crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--accent); }
.article h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.035em; font-weight: 800; line-height: 1.08; }
.article .pmeta { margin-top: 14px; }
.article h2 { font-size: 25px; letter-spacing: -.025em; font-weight: 700; margin-top: 44px; }
.article h3 { font-size: 18px; letter-spacing: -.015em; font-weight: 600; margin-top: 28px; }
.article p, .article li { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.article p { margin-top: 14px; }
.article ul, .article ol { margin: 14px 0 0 22px; } .article li { margin-top: 8px; }
.article b, .article strong { color: var(--ink); }
.article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(15,169,142,.35); }
.article a:hover { border-bottom-color: var(--accent); }
.article code { font-family: var(--mono); font-size: 13.5px; background: var(--panel); padding: 2px 6px; border-radius: 6px; color: var(--ink); }

/* answer-first box */
.tldr { margin-top: 26px; background: var(--accent-soft); border: 1px solid rgba(15,169,142,.3);
  border-radius: 14px; padding: 20px 24px; }
.tldr .k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); }
.tldr p { margin-top: 8px; color: var(--ink); font-size: 16px; }

/* before/after swap chip */
.swapbox { margin-top: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; font-family: var(--mono); font-size: 14px; line-height: 1.8; word-break: break-all; }
.swapbox .bad { color: var(--ink-3); } .swapbox .bad s { color: var(--red); }
.swapbox .good { color: var(--ink); } .swapbox .good b { color: var(--accent); font-weight: 500; }

/* conversion box */
.cta-inline { margin-top: 34px; background: var(--ink); color: var(--paper); border-radius: 16px;
  padding: 28px 30px; }
.cta-inline h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; font-weight: 700; color: var(--paper); }
.cta-inline p { margin-top: 8px; color: rgba(251,250,247,.75); font-size: 15px; }
.cta-inline .btn { margin-top: 16px; background: var(--paper); color: var(--ink); }
.cta-inline .btn:hover { background: #fff; }

/* comparison table */
.article table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.article th { text-align: left; font-weight: 600; color: var(--ink); padding: 10px 12px; border-bottom: 2px solid var(--line-2); }
.article td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.article td:first-child { color: var(--ink); font-weight: 500; }