/* calendarmirror.com/blog — one stylesheet for the index and every post.
 *
 * The comparison pages each carry their own copy of the same rules; the blog
 * is one directory of pages with identical furniture, so the rules live here
 * once. Tokens, type and the page column all come from ../site.css. */

h1{font-size:clamp(32px,4.6vw,48px);margin-top:1.5rem}
.dateline{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0 0 1.8rem}
.lede{font-size:19px;line-height:1.6}
article h2{font-size:clamp(24px,3vw,30px);margin-top:2.4rem}
article h3{font-size:19px}

/* A pulled-out passage: the answer, or the honest caveat. */
.verdict{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.2rem 0 .2rem;margin:1.8rem 0 2rem}
.note{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.9rem 0;margin:1.8rem 0;font-size:15.5px;line-height:1.6}
.note b{font-weight:600}
.src{font-size:14.5px;line-height:1.55;color:var(--muted)}

/* The setup, numbered, because these posts are all instructions in the end. */
.steps{margin:1.2rem 0 1.6rem;padding-left:1.3rem}
.steps li{margin:0 0 .7rem;line-height:1.6}
.steps b{font-weight:600}

.cols{display:grid;grid-template-columns:1fr;gap:1.4rem 2.4rem;border-top:1px solid var(--rule);
  padding-top:1.2rem;margin:1.2rem 0}
@media (min-width:640px){ .cols{grid-template-columns:1fr 1fr} }
.col h3{margin:0 0 .4rem;font-size:17px}
.col p,.col ul{font-size:15.5px;line-height:1.6}

/* The index, and the "read next" list at the foot of a post. */
.cards{border-top:1px solid var(--rule);margin:1.6rem 0 2.4rem}
.card{display:block;padding:.9rem 0 1rem;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink)}
.card:hover{text-decoration:none}
.card h3{margin:0 0 .15rem;font-size:17px;color:var(--link)}
.card:hover h3{text-decoration:underline;text-underline-offset:.15em}
.card p{margin:.15rem 0;font-size:15.5px;line-height:1.55}
.card .meta{color:var(--muted);font-size:14.5px}

.others{border-top:1px solid var(--rule);margin-top:3rem;padding-top:1.2rem}
.others h2{margin-top:0;font-size:19px}
.chips{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;margin-top:.6rem;font-size:15px}
.chip{text-decoration:none}
.chip:hover{text-decoration:underline}