/* DiOro999.9 - blog list and posts. Loaded after styles.css. */
.page-head { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 1rem; }
.page-head h1 { margin-bottom: .6rem; text-wrap: balance; letter-spacing: -.02em; }
.page-head .lead { max-width: 60ch; }
.blog-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 1rem 0 2rem; }
.blog-cats { display: flex; flex-wrap: wrap; gap: .6rem; }
.blog-search-wrap { position: relative; flex: 1 1 220px; max-width: 360px; }
.blog-search-wrap svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--ink-muted); pointer-events: none; }
.blog-search { width: 100%; min-height: 40px; padding: .5rem .9rem .5rem 2.3rem; border: 1px solid var(--gold-line); border-radius: 999px; font-size: 16px; background: var(--white); color: var(--ink); }
.blog-search:focus { outline: none; border-color: var(--gold-text); box-shadow: 0 0 0 2px var(--gold-a28); }
.post-head { max-width: 820px; }
.post-head .eyebrow { color: var(--gold-text); }
.post-head h1 { margin-bottom: .8rem; }
.post-hero { margin: 1.5rem 0 2rem; max-width: 1000px; }
.post-hero img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--gold-hair); }
.post-hero figcaption { margin-top: .5rem; font-size: .8rem; color: var(--ink-muted); }
.post-body { max-width: 760px; }
.post-body p { max-width: none; }
.post-body h2:first-child { margin-top: 0; }
.post-box { margin: 2rem 0; padding: 1.3rem 1.4rem; background: var(--cream-2); border-left: 3px solid var(--gold); border-radius: 0 .6rem .6rem 0; }
.post-box h3 { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .6rem; }
.post-box .ticks { margin-top: 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0 1.4rem; background: var(--white); border: 1px solid var(--line-paper); border-radius: var(--radius); overflow: hidden; }
.post-body th, .post-body td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-paper); }
.post-body th { font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); font-weight: 600; background: var(--cream-2); }
.post-body tr:last-child td { border-bottom: 0; }
.post-table-wrap { overflow-x: auto; }
.post-faq { margin-top: 3rem; max-width: 820px; }
.post-faq h2 { font-size: 1.7rem; margin-bottom: .8rem; }
.post-related { margin-top: 3rem; }
.post-related h2 { font-size: 1.7rem; margin-bottom: 1.2rem; }
.post-more { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-paper); }
.post-more h2 { font-size: 1.2rem; margin-bottom: .8rem; }
.post-more ul { display: grid; gap: .5rem; }
.post-note { font-size: .85rem; color: var(--ink-muted); font-style: italic; }
@media (max-width: 600px) {
  .blog-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: .2rem; }
  .blog-cats::-webkit-scrollbar { display: none; }
  .blog-cats .filter-chip { flex: none; }
  .blog-search-wrap { max-width: none; }
}