/* Shared styles for all /guides/* article pages.
 * Auto-extracted from inline <style> blocks across templates/guide_*.html.
 * Page-specific overrides remain inline in each guide template.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
            background: var(--paper);
            color: var(--ink);
            font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
        }

:root {
            --paper-2:    #EEE5D2;
            --paper-3:    #E3D7BD;
            --ink-2:      #3A342A;
            --ink-3:      #6E6653;
            --ink-4:      #A89E88;
            --rule:       #D9CCB0;
            --rule-soft:  #E8DEC6;
            --teal:       #2F7A7A;
            --teal-deep:  #1F5A5A;
            --teal-tint:  #D3E3E1;
            --coral:      #E15241;
            --font-display: "Instrument Serif", ui-serif, Georgia, serif;
            --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
            --content-max: 720px;
        }

.bg-paper-grain {
            position: fixed; inset: 0; pointer-events: none; z-index: 0;
            background-image: radial-gradient(rgba(28,25,19,0.03) 1px, transparent 1.2px);
            background-size: 4px 4px;
            mix-blend-mode: multiply;
            opacity: 0.5;
        }

.app { position: relative; z-index: 1; }

.article-breadcrumb {
            font-family: var(--font-mono);
            font-size: 10.5px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--ink-4);
            margin-bottom: 16px;
        }

.article-breadcrumb a { color: var(--teal); text-decoration: none; }

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

.article-cat {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--coral);
            margin-bottom: 12px;
        }

.article-title {
            font-family: var(--font-display);
            font-size: clamp(36px, 5vw, 60px);
            font-weight: 400;
            line-height: 1.08;
            letter-spacing: -0.015em;
            margin-bottom: 20px;
            color: var(--ink);
        }

.article-lede {
            font-size: 19px;
            color: var(--ink-2);
            line-height: 1.6;
            max-width: 60ch;
            margin-bottom: 24px;
        }

.article-meta {
            display: flex;
            gap: 20px;
            font-family: var(--font-mono);
            font-size: 10.5px;
            letter-spacing: 0.08em;
            color: var(--ink-3);
        }

.article-body h2 {
            font-family: var(--font-display);
            font-size: 30px;
            font-weight: 400;
            letter-spacing: -0.01em;
            line-height: 1.15;
            color: var(--ink);
            margin: 48px 0 14px;
            padding-top: 8px;
        }

.article-body h3 {
            font-family: var(--font-display);
            font-size: 21px;
            font-weight: 400;
            color: var(--ink);
            margin: 32px 0 10px;
        }

.article-body p {
            color: var(--ink-2);
            margin-bottom: 18px;
        }

.article-body p:last-child { margin-bottom: 0; }

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

.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.article-body a:hover { color: var(--teal-deep); }

.callout.warning {
            background: #FEF3C7;
            border-left-color: #D97706;
        }

.callout p { margin-bottom: 0; color: var(--ink-2); font-size: 15px; }

.callout strong { color: var(--ink); }

.cost-table tbody td {
            padding: 11px 14px;
            border-bottom: 1px solid var(--rule-soft);
            color: var(--ink-2);
            vertical-align: top;
        }

.faq-item {
            border-bottom: 1px solid var(--rule-soft);
            padding: 18px 0;
        }

.faq-item:first-child { border-top: 1px solid var(--rule-soft); }

.faq-q {
            font-weight: 600;
            color: var(--ink);
            font-size: 16px;
            margin-bottom: 8px;
        }

.faq-a { color: var(--ink-2); font-size: 15px; }

.sources-section h4 {
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-4);
            margin-bottom: 12px;
        }

.sources-list { list-style: none; padding: 0; }

.sources-list li {
            font-size: 12px;
            color: var(--ink-3);
            margin-bottom: 6px;
            padding-left: 14px;
            position: relative;
        }

.sources-list li::before { content: "↗"; position: absolute; left: 0; color: var(--ink-4); }

.sources-list a { color: var(--teal); text-decoration: none; }

.sources-list a:hover { text-decoration: underline; }

.toc {
            position: sticky;
            top: 80px;
            background: var(--paper-2);
            border: 1px solid var(--rule);
            border-radius: 12px;
            padding: 20px 22px;
        }

.toc-title {
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-4);
            margin-bottom: 14px;
        }

.toc-list { list-style: none; padding: 0; }

.toc-list li { margin-bottom: 4px; }

.toc-list a:hover,
        .toc-list a.active { color: var(--teal); border-left-color: var(--teal); }