/* ============================================================
   BillFast Blog — "The Ledger" visual system (blog pages only)
   Loaded AFTER /landing.css. Replaces the per-post inline styles.
   Fraunces = display type (never below 28px), Inter = UI/body,
   IBM Plex Mono = every figure: dates, read times, metadata.

   LEDGER RULES — do not violate:
   1. Fraunces never below 28px rendered, never italic, never in
      app UI/buttons/forms.
   2. Hairlines are exactly 1px var(--border). No 2px decorative borders.
   3. No paper texture, grain, deckle, aged effects. Ever.
   4. Purple = interactive only (links, buttons, focus, one accent
      per specimen). Banned: purple backgrounds, glows, gradients,
      card borders.
   5. Interactive motion = 150ms ease-out, opacity/2px translate only.
      Content never animates in.

   SPECIMEN KIT — CONTRACT (every .spec-svg composition):
   - viewBox 0 0 320 180; all coordinates on a 4px grid.
     (Sole exception: stamp groups may rotate, per the stamp language.)
   - Strokes exactly 1.5px, stroke-linecap: square. Rendered at screen
     scale via vector-effect: non-scaling-stroke so hairlines stay
     hairlines at thumbnail and header sizes alike.
   - Colors ONLY via: currentColor (ink on the page canvas — inherits
     --text-main), var(--primary) (exactly ONE accent element per
     composition), paper rects fill #FFFFFF with 1.5px currentColor
     stroke at 25% opacity (white paper in both themes), stamp
     elements literal #1E8E5A.
   - Addendum (theme-safety): ink drawn ON the white paper
     (.spec-rule, .spec-num) is literal #1C1B17 — paper doesn't theme,
     so on-paper ink can't either; currentColor ink would vanish on
     white paper in dark mode.
   - No gradients, no filters, no emoji, no raster.
   - Shared classes: .spec-paper, .spec-rule (hairline row lines),
     .spec-num (drawn tabular block: 3 short right-aligned rules),
     .spec-stamp, .spec-accent — plus helpers .spec-svg (root) and
     .spec-ink (canvas-level ink lines).
   ============================================================ */

/* --- Page guards (Outfit is retired sitewide; orbs are gone) --- */
body {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body::before {
    display: none;
}

.nav-brand-text {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* No pulsing CTAs on ledger pages */
.btn-cta-large:not(.btn-cta-outline) {
    animation: none;
}

/* ============================================================
   SPECIMEN KIT
   ============================================================ */
.spec-svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text-main);
}

.spec-svg line,
.spec-svg rect,
.spec-svg circle,
.spec-svg path {
    vector-effect: non-scaling-stroke;
}

.spec-paper {
    fill: #FFFFFF;
    stroke: currentColor;
    stroke-opacity: .25;
    stroke-width: 1.5;
    stroke-linecap: square;
}

.spec-ink {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
}

.spec-rule,
.spec-num line {
    fill: none;
    stroke: #1C1B17;
    stroke-width: 1.5;
    stroke-linecap: square;
}

.spec-stamp,
.spec-stamp rect,
.spec-stamp line {
    fill: none;
    stroke: #1E8E5A;
    stroke-width: 1.5;
    stroke-linecap: square;
}

.spec-accent {
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-linecap: square;
}

/* ============================================================
   BLOG INDEX — ruled list, not cards
   ============================================================ */
.blog-hero {
    padding: 7rem 2rem 3rem;
    text-align: center;
}

.blog-hero .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.blog-hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
    margin: 0.5rem 0 1rem;
}

.blog-hero p {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto;
}

.blog-grid-section {
    padding: 2rem 2rem 6rem;
}

.blog-container {
    max-width: 860px;
    margin: 0 auto;
}

.blog-list {
    border-top: 1px solid var(--border);
}

.blog-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.blog-card-thumb {
    width: 140px;
}

.blog-card-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin-bottom: 0.625rem;
}

.blog-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.blog-card-date,
.blog-read-time {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.blog-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 0.5rem;
    line-height: 1.4;
    transition: color 150ms ease-out;
}

.blog-card:hover .blog-card-title {
    color: var(--primary);
}

.blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.blog-cta-banner {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3rem 1rem;
    text-align: center;
    margin-top: 4rem;
}

.blog-cta-banner h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.blog-cta-banner p {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.article-hero {
    padding: 7rem 2rem 2rem;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.article-art {
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.article-meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.article-meta span {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.article-meta span:first-child {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.article-hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.article-hero .lead {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* In-article CTA box — hairline-ruled, no fill */
.article-cta-wrap {
    max-width: calc(65ch + 4rem);
    margin: 0 auto;
    padding: 0 2rem;
}

.article-cta-box {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2rem 0;
    text-align: center;
    margin: 2.5rem 0;
}

.article-cta-box h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.article-cta-box p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}

/* Article body — 65ch reading column */
.article-wrap {
    max-width: calc(65ch + 4rem);
    margin: 0 auto;
    padding: 2rem 2rem 6rem;
}

.article-body h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.75rem;
    /* 28px — Fraunces floor, never smaller */
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 3rem 0 0.875rem;
    color: var(--text-main);
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.article-body h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.75rem 0 0.625rem;
    color: var(--text-main);
}

.article-body p {
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0 0 1.1rem;
    font-size: 1rem;
}

.article-body ul,
.article-body ol {
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 0 0 1.25rem;
}

.article-body li {
    margin-bottom: 0.3rem;
}

.article-body strong {
    color: var(--text-main);
    font-weight: 600;
}

.article-body a {
    color: var(--primary);
    text-decoration: underline;
}

/* Reference tables — ruled rows, no cell grid */
.invoice-fields-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0 1.75rem;
    font-size: 0.9rem;
}

.invoice-fields-table th {
    text-align: left;
    padding: 0.65rem 0.875rem 0.65rem 0;
    border-bottom: 1px solid var(--border);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.invoice-fields-table td {
    padding: 0.75rem 0.875rem 0.75rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: top;
    line-height: 1.5;
}

.invoice-fields-table td:first-child {
    font-weight: 600;
    color: var(--text-main);
}

.tag-required,
.tag-optional {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.6;
    padding: 0 0.375rem;
    border: 1px solid currentColor;
    margin-left: 0.35rem;
}

.tag-required {
    color: #C2452D;
}

[data-theme="dark"] .tag-required {
    color: #E06A50;
}

.tag-optional {
    color: #14764A;
}

[data-theme="dark"] .tag-optional {
    color: #34B27B;
}

/* Tip callout — a quiet ledger note */
.tip-box {
    border-left: 1px solid var(--border);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 1.75rem 0;
}

.tip-box p {
    margin: 0;
    font-size: 0.92rem;
}

.tip-box strong {
    color: var(--text-main);
}

/* Article footer nav */
.article-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.article-nav a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.article-nav a:hover {
    text-decoration: underline;
}

/* TOC — ruled block, no card */
.toc {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
    margin-bottom: 2.5rem;
}

.toc-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.875rem;
}

.toc ol {
    margin: 0;
    padding-left: 1.5rem;
}

.toc li {
    margin-bottom: 0.4rem;
}

.toc li::marker {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.toc a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 150ms ease-out;
}

.toc a:hover {
    color: var(--primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
    .blog-hero {
        padding: 6rem 1.5rem 2rem;
    }

    .blog-grid-section {
        padding: 1.5rem 1.5rem 4rem;
    }

    .blog-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .blog-card-thumb {
        width: 100%;
        max-width: 240px;
    }

    .article-hero {
        padding: 6rem 1.5rem 1.5rem;
    }

    .article-wrap,
    .article-cta-wrap {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}