/* The blog's own rules, on top of styles.css. One reading column, no sidebar (Answer Sheet,
   BLOG-PLAN.md §2, 5 September 2026). */
.blog-col{max-width:820px;margin:0 auto;padding-inline:var(--d-gutter)}
.blog-col .reading{padding-block:var(--s-6) var(--s-14)}
.blog-meta{margin-top:var(--s-2)}
/* the one-sentence answer under an H2, a tinted tile with a label */
.reading p.answer{margin-top:var(--s-4);background:var(--d-sky-tint);border:var(--d-border);border-radius:var(--d-radius);padding:var(--s-4) var(--s-5);color:var(--d-ink);font-weight:500}
.reading p.answer .label{display:block;margin-bottom:var(--s-1)}
/* a copyable block: the checklist, the email, the message. Pressable, so the button carries the shadow */
.copy-block{margin-top:var(--s-6);background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);padding:var(--s-5) var(--s-6)}
.copy-block .copy-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.copy-block .label{margin:0}
.copy-block .copy-body{margin-top:var(--s-4)}
.copy-block .copy-body p+p,.copy-block .copy-body ol,.copy-block .copy-body ul{margin-top:var(--s-3)}
.copy-block .copy-body li{margin-top:var(--s-2)}
.copy-btn{min-height:44px;padding:0 18px;font-size:14px;box-shadow:var(--d-shadow-sm)}
.copy-btn:active{transform:translate(2px,2px);box-shadow:none}
.copy-btn.done{background:var(--d-mint)}
/* the table inside a post scrolls, never the page */
.reading .table-scroll{margin-top:var(--s-6)}
.reading table{width:100%;border-collapse:collapse;font-size:var(--d-fs-sm);min-width:560px}
.reading th,.reading td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--d-line);vertical-align:top}
.reading th{background:var(--d-cream-deep);color:var(--d-ink);font-weight:600}
.reading tr:last-child td{border-bottom:0}
/* read next */
.read-next{margin-top:var(--s-12);padding-top:var(--s-8);border-top:1px solid var(--d-line)}
.read-next ul{list-style:none;padding:0;margin-top:var(--s-4);display:grid;gap:var(--s-3)}
.read-next li a{display:block;background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow-sm);padding:var(--s-4) var(--s-5);text-decoration:none;color:var(--d-ink);font-weight:600;transition:transform var(--d-dur) var(--d-ease),box-shadow var(--d-dur) var(--d-ease)}
.read-next li a:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--d-ink)}
.read-next li a span{display:block;font-weight:400;color:var(--d-muted);font-size:var(--d-fs-cap);margin-top:2px}
/* the index: one card per post, the question first */
.post-list{list-style:none;padding:0;margin-top:var(--s-8);display:grid;gap:var(--s-5)}
.post-card{display:block;background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow);padding:var(--s-6);text-decoration:none;transition:transform var(--d-dur) var(--d-ease),box-shadow var(--d-dur) var(--d-ease)}
.post-card:hover{transform:translate(1px,1px);box-shadow:var(--d-shadow-hover)}
.post-card .label{display:inline-flex}
.post-card .q{display:block;margin-top:var(--s-3);font-family:var(--d-font-display);font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:var(--d-ink)}
.post-card .a{display:block;margin-top:var(--s-3);color:var(--d-ink-2)}
.post-card .meta{display:block;margin-top:var(--s-3);color:var(--d-muted);font-size:var(--d-fs-cap)}