/* ============================================================
   Ayami blog — article extras only.
   Everything else (header, footer, banner, tabs, cards, tags,
   search, FAQ, load more, article hero + sidebar, tokens and the
   type scale) comes from the website's /assets/css/site.css.
   This file only styles what a CMS-written article body needs.
   ============================================================ */

/* Draft preview banner (signed-in admins only) */
.blog-preview-bar { background: var(--c-cocoa-50); color: var(--c-ink); text-align: center;
  padding: var(--sp-3) var(--gutter); font-size: var(--fs-small); border-bottom: 1px solid var(--c-line); }
.blog-preview-bar a { margin-left: var(--sp-2); font-weight: 600; }

/* "In short" summary */
.post-tldr { background: var(--c-paper); border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold);
  border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-7); }
.post-tldr__title { font-family: var(--f-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-cocoa); margin-bottom: var(--sp-2); }
.post-tldr p { color: var(--c-ink); font-size: var(--fs-lead); }

/* Body copy written in the editor — uses the site type scale (body 1rem / 1.68) */
.post-content { color: var(--c-text); overflow-wrap: anywhere; max-width: none; }
.post-content > * + * { margin-top: var(--sp-4); }
.post-content h2 { margin-top: var(--sp-8); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.post-content h3 { margin-top: var(--sp-6); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.post-content h4 { margin-top: var(--sp-5); }
.post-content > :first-child { margin-top: 0; }
.post-content a { color: var(--c-cocoa); text-decoration: underline; text-decoration-color: rgba(112, 73, 51, 0.4); }
.post-content a:hover { text-decoration-color: currentColor; }
.post-content strong, .post-content b { color: var(--c-ink); font-weight: 600; }
.post-content img { border-radius: var(--radius); margin-block: var(--sp-5); }
.post-content blockquote { border-left: 2px solid var(--c-gold); padding-left: var(--sp-5);
  font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.45; color: var(--c-ink); }
.post-content pre { background: var(--c-espresso); color: var(--c-on-dark); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius); overflow-x: auto; font-size: var(--fs-small); }
.post-content hr { border: 0; border-top: 1px solid var(--c-line); margin-block: var(--sp-7); }
.post-content table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-small); max-width: 100%; }
.post-content th, .post-content td { border: 1px solid var(--c-line); padding: var(--sp-2) var(--sp-3); text-align: left; }
.post-content th { background: var(--c-sand); color: var(--c-ink); }
.post-content .ql-align-center { text-align: center; }
.post-content .ql-align-right { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }
.post-content .ql-indent-1 { padding-left: 2em; }
.post-content .ql-indent-2 { padding-left: 4em; }

/* Tags (not links) */
.post-tags { margin-top: var(--sp-7); }
.post-tag { min-height: 34px; }
.post-tag:hover { border-color: var(--c-line-strong); color: var(--c-text); }

/* FAQ block inside an article */
.post-faq { margin-top: var(--sp-8); }
.post-faq > h2 { margin-bottom: var(--sp-5); }

/* Author */
.post-author { display: flex; gap: var(--sp-4); align-items: flex-start; margin-top: var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.post-author__avatar { flex: none; width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--c-cocoa); color: var(--c-paper); display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; }
.post-author__name { font-weight: 600; color: var(--c-ink); }
.post-author__bio { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--c-muted); }