/*
  Blog. Loaded AFTER /styles.css and adds only the long-form reading layout.
  Buttons, .shell, .nav, .faq, the footer and every token are inherited.

  Same rules as the rest of the site: white canvas, monochrome action layer,
  cyan only as a small accent (eyebrow, list markers, inline link underline),
  Inter 600 at negative tracking for display type, radius 8/12/16.
*/

/* ------------------------------------------------------------------ hero */

.bl-hero { padding: clamp(40px, 6vw, 72px) 0 8px; }
.bl-crumbs { font-size: 13px; color: var(--muted-soft); margin-bottom: var(--s-md); }
.bl-crumbs a { color: var(--muted); text-decoration: none; }
.bl-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand-accent);
    margin-bottom: var(--s-sm);
}
.bl-hero h1 {
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.08; letter-spacing: -0.04em;
    max-width: 22ch; margin-bottom: var(--s-md);
}
.bl-lede { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.bl-meta { margin-top: var(--s-md); font-size: 13px; color: var(--muted-soft); display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* --------------------------------------------------------------- article */

.bl-wrap { max-width: 760px; }
.bl-article { padding: var(--s-xl) 0 var(--s-section); }

.bl-tldr {
    background: var(--surface-card);
    border-radius: var(--r-lg);
    padding: var(--s-lg);
    margin-bottom: var(--s-xl);
}
.bl-tldr h2 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--s-sm); color: var(--ink); }
.bl-tldr ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.bl-tldr li { font-size: 15.5px; line-height: 1.55; color: var(--body); }

.bl-body { font-size: 17px; line-height: 1.75; color: var(--body); }
.bl-body > * + * { margin-top: 1.1em; }
.bl-body h2 {
    font-size: clamp(24px, 2.8vw, 30px);
    line-height: 1.2; letter-spacing: -0.03em;
    margin-top: 2.2em;
}
.bl-body h3 { font-size: 19px; letter-spacing: -0.01em; margin-top: 1.8em; }
.bl-body strong { color: var(--ink); font-weight: 600; }
.bl-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand-accent); text-underline-offset: 3px; }
.bl-body ul, .bl-body ol { padding-left: 22px; }
.bl-body li + li { margin-top: 6px; }
.bl-body li::marker { color: var(--muted-soft); }

/* A plain-text checklist: boxes the reader can copy into a document. */
.bl-check { list-style: none; padding-left: 0 !important; }
.bl-check li { position: relative; padding-left: 30px; }
.bl-check li::before {
    content: ''; position: absolute; left: 0; top: 6px;
    width: 16px; height: 16px; border: 1.5px solid var(--surface-strong); border-radius: 4px;
}

.bl-note {
    border-left: 3px solid var(--brand-accent);
    background: var(--surface-soft);
    padding: var(--s-md) var(--s-lg);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 15.5px; line-height: 1.65;
}

/* Template blocks a reader is expected to copy. */
.bl-template {
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s-lg);
    font-size: 15.5px; line-height: 1.65;
}
.bl-template h3 { margin-top: 1.2em; font-size: 16px; }
.bl-template h3:first-child { margin-top: 0; }
.bl-template p + p, .bl-template ul { margin-top: .6em; }

/* Tables scroll inside their own box on a phone rather than widening the page. */
.bl-table { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.bl-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
.bl-table th, .bl-table td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--hairline-soft); vertical-align: top; }
.bl-table thead th { border-top: 0; background: var(--surface-soft); color: var(--ink); font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------------------- CTA */

.bl-cta {
    background: var(--surface-card);
    border-radius: var(--r-lg);
    padding: var(--s-lg) var(--s-lg) var(--s-lg);
    margin: 2em 0;
}
.bl-cta p.bl-cta-h { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.35; }
.bl-cta p.bl-cta-s { margin-top: 6px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.bl-cta .btn { margin-top: var(--s-md); }
.bl-body .bl-cta a.btn { color: var(--on-dark); text-decoration: none; }

/* ------------------------------------------------------------------- FAQ */

.bl-faq { margin-top: var(--s-md) !important; max-width: none; }
.bl-faq details { background: var(--surface-card); }
.bl-faq .a { font-size: 15.5px; line-height: 1.65; color: var(--body); }

/* --------------------------------------------------------- related + end */

.bl-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-md); margin-top: var(--s-lg); }
.bl-card {
    display: flex; flex-direction: column;
    background: var(--canvas);
    border-radius: var(--r-lg);
    padding: var(--s-lg);
    text-decoration: none; color: inherit;
}
.band-canvas .bl-card { background: var(--surface-card); }
.bl-card h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: var(--s-xs); }
.bl-card p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.bl-card .bl-card-meta { font-size: 12.5px; color: var(--muted-soft); margin-bottom: var(--s-xs); }
.bl-card .card-more { margin-top: auto; padding-top: var(--s-md); }

.bl-end { text-align: center; }
.bl-end h2 { margin-bottom: var(--s-sm); }
.bl-end p { font-size: 17px; color: var(--muted); max-width: 54ch; margin: 0 auto var(--s-lg); }
.bl-end .bl-fine { margin-top: var(--s-sm); font-size: 13px; color: var(--muted-soft); }

/* ---------------------------------------------------------------- index */

.bl-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-lg); padding: var(--s-xl) 0 var(--s-section); }
@media (max-width: 760px) { .bl-list { grid-template-columns: 1fr; } }
.bl-list .bl-card { padding: var(--s-xl); }
.bl-list .bl-card h2 { font-size: 21px; line-height: 1.25; letter-spacing: -0.025em; margin-bottom: var(--s-xs); }

@media (max-width: 640px) {
    .bl-body { font-size: 16.5px; }
    .bl-cta .btn { width: 100%; }
}