/* ══════════════════════════════════════════════════════════
   JOURNAL — the blog pages, on top of style.css

   One column at reading width. The home page's nav, buttons, eyebrows,
   FAQ items and footer rules are style.css's; this only lays the article
   out. Linked by blog/*.html after style.css; stamped ?v= by tools/build.mjs.
   ══════════════════════════════════════════════════════════ */
.post { padding: clamp(7rem, 14vw, 10rem) 0 clamp(3rem, 7vw, 5rem); }
.post__shell { max-width: 46rem; }
.post__crumbs { display: flex; gap: .6rem; font-size: .8125rem; color: var(--ink-dim); }
.post__crumbs a:hover { color: var(--ink); }
.post__head .eyebrow { margin-top: 1.75rem; }
.post__title { margin-top: 1.2rem; font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
.post__lede { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--ink-70); }
.post__by { margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-dim); }
.post__by a { color: var(--ink-70); text-decoration: underline; text-underline-offset: .25em; }
.post__by a:hover { color: var(--ink); }

.post__body { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hair); }
.post__body h2 {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1; letter-spacing: .01em;
  text-wrap: balance;
}
.post__body h2:first-child { margin-top: 0; }
.post__body p, .post__body li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-70); }
.post__body p { margin-top: 1rem; }
.post__body ul, .post__body ol { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li + li { margin-top: .4rem; }
.post__body a { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--emerald); }
.post__body strong { color: var(--ink); font-weight: 500; }

/* the short version, boxed */
.post__key {
  margin-top: clamp(2.25rem, 5vw, 3.25rem); padding: 1.4rem 1.6rem;
  border: 1px solid var(--hair); border-left: 2px solid var(--emerald); border-radius: 1rem;
  background: var(--shell-wash);
}
.post__key h2 { font-size: 1.25rem; }
.post__key ul { margin-top: .75rem; }
.post__key li { font-size: .9375rem; }

/* the questions at the end, in the FAQ's own clothes */
.post__qa { margin-top: 1rem; }
.post__qa .qa__body p { font-size: .9375rem; }

.post__foot { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hair); }
.post__foot p { color: var(--ink-70); }
.post__foot .footer__ways { margin-top: 1.25rem; }
.post__more { margin-top: 2rem; font-size: .9375rem; color: var(--ink-dim); }
.post__more a { color: var(--ink-70); text-decoration: underline; text-underline-offset: .25em; }
.post__more a:hover { color: var(--ink); }

/* the journal's front: one card per post */
.posts { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.posts__card {
  display: grid; gap: .6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--hair); border-radius: 1.25rem; background: var(--paper-raise);
  transition: border-color .5s var(--ease), transform .6s var(--ease);
}
.posts__card:hover { border-color: var(--emerald); transform: translateY(-2px); }
.posts__card h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; }
.posts__card p { color: var(--ink-70); max-width: 60ch; }
.posts__meta { font-size: .8125rem; color: var(--ink-dim); }
.posts__card .link { justify-self: start; margin-top: .25rem; }

/* the site footer on these pages: the short version */
.post-footer { padding-block: 2rem; border-top: 1px solid var(--hair); }
.post-footer .footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }