/* Blog — Tiles by Fox. Tokens (--gold, --charcoal, --ink, --pale, --line, --muted, --white)
   come from ../styles.css. Everything here is prefixed .bl- or scoped to .post-body. */

/* ---- Hero shared by the index and the articles ---- */
.bl-hero { padding: 84px 0 58px; border-bottom: 1px solid var(--line) }
.bl-hero h1 { font-size: clamp(40px, 4.6vw, 66px); max-width: 880px }
.bl-hero .lead { margin-top: 26px }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; font-size: 12px; color: var(--muted) }
.bl-meta b { color: var(--ink); font-weight: 800 }
.bl-meta .dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex: none }

/* ---- Breadcrumb ---- */
.bl-crumbs { padding: 22px 0 0; font-size: 12px; color: var(--muted) }
.bl-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px }
.bl-crumbs li + li:before { content: '/'; margin-right: 9px; color: var(--line) }
.bl-crumbs a { border-bottom: 1px solid var(--line); padding-bottom: 2px }
.bl-crumbs a:hover { border-color: var(--gold) }
.bl-crumbs [aria-current] { color: var(--ink); font-weight: 700 }

/* ---- Index: article list ---- */
.bl-list { display: grid; gap: 0; margin-top: 8px }
.bl-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 32px; padding: 38px 0; border-bottom: 1px solid var(--line); align-items: start }
.bl-card:first-child { padding-top: 10px }
.bl-card .bl-num { font-family: Playfair, Georgia, serif; font-size: 36px; font-weight: 500; line-height: 1; color: var(--line); letter-spacing: -.04em }
.bl-card h2 { font-size: clamp(25px, 2.4vw, 33px); letter-spacing: -.035em }
.bl-card h2 a { display: inline-block }
.bl-card h2 a:hover { border-bottom: 2px solid var(--gold); padding-bottom: 3px }
.bl-card p { font-size: 15px; color: var(--muted); margin-top: 14px; max-width: 68ch; line-height: 1.7 }
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--muted); align-items: center }
.bl-tags .stage { border: 1px solid var(--line); background: var(--white); padding: 6px 11px; letter-spacing: .1em }
.bl-tags .read { color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: none }

/* ---- Index: topic groups ---- */
.bl-group { padding-top: 54px }
.bl-group > .eyebrow { margin-bottom: 14px }
.bl-group > p.muted { font-size: 14px; max-width: 62ch; margin-bottom: 10px }

/* ---- Article layout ---- */
.post { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 80px; align-items: start; padding: 58px 0 90px }
.post-toc { position: sticky; top: 120px }
.post-toc > span { display: block; font-size: 10px; letter-spacing: .15em; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 12px }
.post-toc a { display: block; font-size: 12px; padding: 8px 10px; border-left: 2px solid var(--line); color: var(--muted); line-height: 1.45 }
.post-toc a:hover { border-color: var(--gold); color: var(--ink) }
.post-body { max-width: 740px; min-width: 0 }

.post-body > p:first-of-type { font-size: 18px; line-height: 1.75; color: var(--ink) }
.post-body h2 { font-size: clamp(27px, 2.9vw, 37px); margin: 52px 0 18px; scroll-margin-top: 118px }
.post-body h2:first-of-type { margin-top: 10px }
.post-body h3 { font-size: 18px; letter-spacing: -.015em; margin: 32px 0 10px }
.post-body p, .post-body li { font-size: 16px; line-height: 1.78 }
.post-body p { color: var(--ink) }
.post-body p + p { margin-top: 16px }
.post-body ul, .post-body ol { margin: 16px 0 0; padding-left: 21px; color: var(--ink) }
.post-body li + li { margin-top: 9px }
.post-body li::marker { color: var(--gold) }
.post-body strong { font-weight: 800 }
.post-body a:not(.btn):not(.text-link) { border-bottom: 1px solid var(--gold); padding-bottom: 1px }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0 }

/* Pull-out note: the "what we actually do on site" asides. */
.post-note { background: var(--pale); border-left: 3px solid var(--gold); padding: 24px 28px; margin: 32px 0 }
.post-note strong { display: block; margin-bottom: 8px; font-size: 14px }
.post-note p, .post-note li { font-size: 14px; line-height: 1.7; color: var(--muted) }

/* Spec/comparison tables inside an article. The global th is dark; keep these quiet. */
.post-body table { width: 100%; min-width: 0; border-collapse: collapse; margin: 26px 0; font-size: 14px }
.post-body th { text-align: left; background: transparent; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; padding: 0 16px 10px 0; border-bottom: 1px solid var(--line) }
.post-body td { padding: 14px 16px 14px 0; border-bottom: 1px solid #eeedec; vertical-align: top; font-weight: 400; line-height: 1.65 }
.post-body td:first-child { font-weight: 800 }
.post-body tbody tr:nth-child(even) { background: transparent }
.post-body tbody tr:last-child td { border-bottom: 0 }
.post-table-scroll { overflow-x: auto; margin: 26px 0 }
.post-table-scroll table { margin: 0; min-width: 460px }

/* FAQ block at the end of an article (mirrors the homepage <details> pattern). */
.post-faq { margin-top: 44px; padding-top: 10px }
.post-faq h2 { margin-bottom: 6px }

/* End-of-article CTA */
.post-cta { background: var(--charcoal); color: var(--white); padding: 42px 44px; margin-top: 56px }
.post-cta .eyebrow { color: var(--gold) }
.post-cta h2 { font-family: Playfair, Georgia, serif; font-weight: 500; font-size: clamp(27px, 3vw, 38px); line-height: 1.15; letter-spacing: -.04em; margin: 0 0 16px }
.post-cta p { color: #d3d1d2; font-size: 15px; max-width: 56ch }
.post-cta .actions { margin-top: 26px }
.post-cta .btn-outline { color: var(--white); border-color: #ffffff55 }
.post-cta .btn-outline:hover { color: var(--ink) }
.post-cta .fine { color: #b9b7b8; margin-top: 20px }
.post-cta .fine a { color: var(--gold); border-bottom: 1px solid #ffffff40 }

/* Related reading */
.post-related { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line) }
.post-related > span { display: block; font-size: 10px; letter-spacing: .15em; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 18px }
.post-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.post-related li { padding-left: 0 }
.post-related a { font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 3px }
.post-related a:hover { border-color: var(--gold) }
.post-related .fine { margin-top: 5px; display: block }

/* Honest-limits line under an article: what we did not measure. */
.post-stamp { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.7 }

@media (max-width: 1050px) {
  .post { grid-template-columns: 180px minmax(0, 1fr); gap: 42px }
}
@media (max-width: 760px) {
  .bl-hero { padding: 54px 0 40px }
  .bl-hero h1 { font-size: 38px }
  .post { display: block; padding: 34px 0 60px }
  .post-toc { position: relative; top: auto; display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line) }
  .post-toc > span { display: none }
  .post-toc a { border: 1px solid var(--line); padding: 9px 14px; flex: none }
  .post-body h2 { margin-top: 42px }
  .post-cta { padding: 30px 24px }
  .bl-card { grid-template-columns: 1fr; gap: 0; padding: 30px 0 }
  .bl-card .bl-num { font-size: 22px; margin-bottom: 10px }
  .post-body table { min-width: 0 }
}