/* bothparents.org -- editorial design system. See docs/brand.md. */

:root {
    --primary: #1d3d5c;      /* deep navy */
    --bg: #faf7f1;           /* warm off-white */
    --text: #1a1a1a;         /* near-black */
    --muted: #5d5856;        /* warm gray */
    --rule: #e5e3df;         /* taupe */
    --accent: #a8632a;       /* burnt clay */
    --surface: #f1ece0;      /* slightly deeper than bg, for cards */

    --font-serif: "Source Serif 4", Charter, Georgia, "Iowan Old Style", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --measure: 68ch;
    --wide: 1200px;
    --content: 1100px;
}

* { box-sizing: border-box; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.65;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 150ms ease, text-decoration-color 150ms ease;
}
a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.18;
    color: var(--primary);
    letter-spacing: -0.012em;
    margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ----- Layout helpers ----- */
.wrap        { width: 100%; max-width: var(--wide);    margin: 0 auto; padding: 0 1.5rem; }
.wrap-text   { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

/* ----- Skip link (a11y) ----- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--primary);
    color: var(--bg);
    padding: 0.625rem 1rem;
    z-index: 100;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    text-decoration: none;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ----- Header ----- */
.site-header {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.site-brand { display: inline-flex; line-height: 0; text-decoration: none; }
.site-brand:hover { text-decoration: none; }
.site-logo { height: 40px; width: auto; display: block; }
@media (min-width: 768px) {
    .site-logo { height: 48px; }
}

.site-nav { font-family: var(--font-sans); font-size: 0.9375rem; }
.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.site-nav a {
    color: var(--text);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
}
.site-nav a:hover,
.site-nav a.nav-current {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Pillar nav active state on single posts.
   Ghost auto-applies .nav-current to the nav item whose URL matches
   the current page (tag archive, About). On single posts that isn't
   enough, so we use the body class Ghost adds for each of the post's
   tags (tag-<slug>) to highlight the matching nav item.
   Requires nav-label slugs to match tag slugs (e.g., a nav item
   labelled "Equal Co-Parenting" produces .nav-equal-co-parenting,
   which matches the body class on a post tagged equal-co-parenting). */
body.tag-equal-co-parenting .site-nav li.nav-equal-co-parenting a,
body.tag-parental-alienation .site-nav li.nav-parental-alienation a,
body.tag-family-court .site-nav li.nav-family-court a,
body.tag-child-support .site-nav li.nav-child-support a {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ----- Main ----- */
.site-main { padding: 3rem 0 4rem; }

/* ===== Homepage feed ===== */

/* Mission statement (homepage page 1 only) */
.site-mission {
    max-width: var(--measure);
    margin: 0 auto 4rem;
    padding: 0.5rem 1.5rem 0;
    text-align: center;
}
.site-mission-lead {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 0.75rem;
}
.site-mission-stance {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 600px) {
    .site-mission-lead { font-size: 1.1875rem; }
    .site-mission-stance { font-size: 1rem; }
}

/* Lead story */
.feed-lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 800px) {
    .feed-lead {
        grid-template-columns: 1.15fr 1fr;
        gap: 2.5rem;
        align-items: center;
    }
}
.feed-lead .post-card-image { aspect-ratio: 16/10; }
.feed-lead .post-card-title { font-size: 2.25rem; line-height: 1.15; }
.feed-lead .post-card-excerpt { font-size: 1.0625rem; }
@media (max-width: 600px) {
    .feed-lead .post-card-title { font-size: 1.75rem; }
}

/* Lead post with no feature image: single-column, constrained measure,
   centered. Prevents the half-empty layout that happens when the
   feature-image column is absent. */
.feed-lead-textonly {
    grid-template-columns: 1fr;
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 800px) {
    .feed-lead-textonly { grid-template-columns: 1fr; }
}

/* Secondary feed grid */
.feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 2rem;
}
@media (min-width: 640px) {
    .feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .feed-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Post card */
.post-card { display: flex; flex-direction: column; }
.post-card-image-link {
    display: block;
    overflow: hidden;
    line-height: 0;
    background: var(--surface);
    border-radius: 2px;
}
.post-card-image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 400ms ease;
}
.post-card-image-link:hover .post-card-image { transform: scale(1.02); }

.post-card-tag {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    margin: 1rem 0 0.5rem;
    display: inline-block;
}
.post-card-tag:hover { color: var(--primary); text-decoration: underline; }
.post-card-title { font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.5rem; }
.post-card-title a { color: var(--primary); text-decoration: none; }
.post-card-title a:hover { color: var(--accent); }
.post-card-excerpt {
    color: var(--muted);
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.55;
}
.post-card-meta {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--muted);
    display: flex;
    gap: 0.875rem;
    align-items: center;
    margin-top: auto;
}
.post-card-meta time::before,
.post-card-meta .reading-time::before { content: ""; }

/* Empty state */
.feed-empty {
    max-width: var(--measure);
    margin: 2rem auto;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

/* ===== Single post ===== */

.post-header {
    max-width: var(--measure);
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
}
.post-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1rem;
}
.post-eyebrow:hover { color: var(--primary); }
.post-title {
    font-size: 2.75rem;
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
    line-height: 1.12;
}
@media (max-width: 600px) {
    .post-title { font-size: 2rem; }
}
.post-subtitle {
    font-family: var(--font-serif);
    color: var(--muted);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.45;
    margin: 0 0 1.5rem;
    font-weight: 400;
}
.post-meta {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}
.post-meta-author { color: var(--text); font-weight: 600; }

.post-feature-image {
    margin: 0 0 3rem;
    max-width: var(--content);
    margin-left: auto;
    margin-right: auto;
}
.post-feature-image img { width: 100%; }
.post-feature-image figcaption {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
    margin: 0.75rem auto 0;
    max-width: var(--measure);
    padding: 0 1.5rem;
    line-height: 1.4;
}

.post-content {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.5rem;
    font-size: 1.125rem;
    line-height: 1.7;
}
.post-content > * { margin-bottom: 1.25rem; }
.post-content > *:last-child { margin-bottom: 0; }

.post-content h2 { font-size: 1.75rem; margin: 3rem 0 1rem; }
.post-content h3 { font-size: 1.375rem; margin: 2.25rem 0 0.75rem; }
.post-content h4 { font-size: 1.125rem; margin: 2rem 0 0.5rem; }

.post-content p { margin: 0 0 1.25rem; }
.post-content a { text-decoration-thickness: 1px; }

.post-content ul,
.post-content ol { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.post-content li { margin-bottom: 0.5rem; }
.post-content li::marker { color: var(--muted); }

.post-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 2rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    font-style: italic;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1.5;
}
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content figure { margin: 2.5rem 0; }
.post-content figcaption {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
    margin-top: 0.75rem;
    line-height: 1.4;
}

.post-content pre {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 1.5rem 0;
}
.post-content code {
    font-family: var(--font-mono);
    background: var(--surface);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.9em;
}
.post-content pre code { background: none; padding: 0; }

.post-content hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 3rem auto;
    max-width: 4rem;
}

.post-content strong { color: var(--text); }

/* Tables in editorial body content (post-content and page-content).
   Markdown tables in Ghost render as bare <table> without a wrapper, so
   styles apply directly. */
.post-content table,
.page-content table {
    width: 100%;
    margin: 1.75rem 0;
    border-collapse: collapse;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.post-content thead,
.page-content thead {
    background: var(--surface);
}
.post-content th,
.page-content th {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--rule);
    vertical-align: bottom;
    white-space: nowrap;
}
.post-content td,
.page-content td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.post-content tbody tr:last-child td,
.page-content tbody tr:last-child td {
    border-bottom: none;
}
/* Prevent mid-word breaks in short cells (state names, years).
   First two columns are usually short labels in our tables. */
.post-content tbody td:first-child,
.page-content tbody td:first-child {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
.post-content tbody td:nth-child(2),
.page-content tbody td:nth-child(2) {
    white-space: nowrap;
}
/* Responsive: at narrow screens, allow horizontal scroll instead of
   crushing the table. */
@media (max-width: 640px) {
    .post-content table,
    .page-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .post-content tbody td,
    .page-content tbody td {
        white-space: normal;
    }
    .post-content tbody td:first-child,
    .post-content tbody td:nth-child(2),
    .page-content tbody td:first-child,
    .page-content tbody td:nth-child(2) {
        white-space: nowrap;
    }
}

/* ----- Koenig editor cards ----- */
.kg-width-wide {
    width: 100%;
    max-width: calc(var(--measure) + 14rem);
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-wide img,
.kg-width-full img { width: 100%; height: auto; }
.kg-image-card figcaption,
.kg-gallery-card figcaption,
.kg-embed-card figcaption {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
    margin-top: 0.75rem;
    line-height: 1.4;
}
.kg-bookmark-card {
    display: block;
    border: 1px solid var(--rule);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    margin: 1.5rem 0;
    background: var(--bg);
    transition: border-color 150ms ease;
}
.kg-bookmark-card:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.kg-bookmark-container { display: flex; }
.kg-bookmark-content { padding: 1rem 1.25rem; flex: 1; }
.kg-bookmark-title { font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; font-family: var(--font-serif); }
.kg-bookmark-description { color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.kg-bookmark-metadata { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--muted); margin-top: 0.5rem; }

/* ----- Post footer: tags ----- */
.post-tags {
    max-width: var(--measure);
    margin: 3rem auto 0;
    padding: 1.5rem 1.5rem 0;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.post-tags a {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    background: var(--surface);
    color: var(--text);
    padding: 0.3125rem 0.625rem;
    border-radius: 3px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.post-tags a:hover { background: var(--accent); color: var(--bg); }

/* ----- Newsletter CTA ----- */
.newsletter-cta {
    max-width: var(--measure);
    margin: 4rem auto;
    padding: 2rem 1.5rem;
    background: var(--surface);
    border-left: 4px solid var(--accent);
    border-radius: 0 4px 4px 0;
}
.newsletter-cta h3 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: var(--primary);
}
.newsletter-cta p { color: var(--muted); margin: 0 0 1.25rem; font-size: 1rem; }
.newsletter-cta-button {
    display: inline-block;
    background: var(--primary);
    color: var(--bg);
    padding: 0.625rem 1.25rem;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 150ms ease;
}
.newsletter-cta-button:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

/* ----- Related posts ----- */
.related-posts {
    max-width: var(--measure);
    margin: 3rem auto 0;
    padding: 1.5rem 1.5rem 0;
    border-top: 1px solid var(--rule);
}
.related-posts-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 1rem;
}
.related-posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}
.related-posts li { padding-left: 0; }
.related-posts a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
    display: inline-block;
}
.related-posts a:hover { color: var(--accent); text-decoration: underline; }

/* ----- Pagination ----- */
.pagination {
    max-width: var(--measure);
    margin: 4rem auto 0;
    padding: 1.5rem;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--muted);
}
.pagination a { color: var(--text); text-decoration: none; font-weight: 600; }
.pagination a:hover { color: var(--accent); }

/* ----- Tag archive ----- */
.tag-header {
    max-width: var(--measure);
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tag-header h1 { font-size: 2.5rem; margin: 0 0 0.75rem; line-height: 1.15; }
.tag-header p { color: var(--muted); font-size: 1.125rem; line-height: 1.55; margin: 0; }

/* ----- Page (About, etc.) ----- */
.page-header {
    max-width: var(--measure);
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
}
.page-title {
    font-size: 3rem;
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
}
@media (max-width: 600px) {
    .page-title { font-size: 2.25rem; }
}
.page-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
}
.page-feature-image {
    margin: 0 auto 2.5rem;
    max-width: var(--content);
}
.page-feature-image figcaption {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
    margin-top: 0.5rem;
}
.page-content {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.5rem;
    font-size: 1.125rem;
    line-height: 1.7;
}
.page-content > * { margin-bottom: 1.25rem; }
.page-content h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; }
.page-content h3 { font-size: 1.375rem; margin: 2.25rem 0 0.75rem; }
.page-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.75rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    font-style: italic;
    color: var(--muted);
}
.page-comments { max-width: var(--measure); margin: 3rem auto 0; padding: 0 1.5rem; }

/* ----- Footer ----- */
.site-footer {
    margin-top: 5rem;
    padding: 3rem 0 2.5rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--muted);
}
.site-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 700px) {
    .site-footer-inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}
.site-footer-credit { margin: 0 0 0.25rem; color: var(--text); font-weight: 600; }
.site-footer-tagline { margin: 0; color: var(--muted); font-style: italic; }
.site-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ----- Focus visibility (a11y) ----- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.site-nav a:focus-visible,
.site-footer a:focus-visible {
    outline-offset: 4px;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   STATE TRACKER PAGE
   Equal Parenting Law by State (custom-state-tracker.hbs).
   Self-contained block; not used elsewhere.
   ===================================================================== */

.state-tracker-page { padding-bottom: 4rem; }

/* Hero */
.state-tracker-hero {
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 3rem;
}
.state-tracker-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.state-tracker-title {
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
    max-width: 22ch;
}
@media (max-width: 640px) {
    .state-tracker-title { font-size: 2.125rem; }
}
.state-tracker-lede {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 1.25rem;
    max-width: 60ch;
}
.state-tracker-meta {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0;
}
.state-tracker-meta a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Optional intro from Ghost editor content */
.state-tracker-intro {
    margin: 0 0 3rem;
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* Legend */
.state-tracker-legend {
    margin: 0 0 3rem;
}
.state-tracker-legend h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}
.state-tracker-legend-intro {
    font-size: 0.9375rem;
    color: var(--muted);
    margin: 0 0 1.5rem;
}
.state-tracker-legend-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
}
@media (min-width: 720px) {
    .state-tracker-legend-list { grid-template-columns: repeat(2, 1fr); }
}
.state-tracker-legend-item {
    display: grid;
    grid-template-columns: minmax(0, 13rem) 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.state-tracker-legend-item dt { margin: 0; }
.state-tracker-legend-item dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.5;
}

/* Status badges (used in legend and on cards) */
.status-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    padding: 0.3125rem 0.625rem;
    border-radius: 2px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.status-rebuttable-presumption {
    background: var(--primary);
    color: var(--bg);
    border-color: var(--primary);
}
.status-pending-bill {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}
.status-court-factor {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.status-no-specific-provision {
    background: var(--surface);
    color: var(--muted);
    border-color: var(--rule);
}
.status-needs-review {
    background: transparent;
    color: var(--muted);
    border-color: var(--rule);
    border-style: dashed;
    font-style: italic;
}

/* Controls (search + filter chips) */
.state-tracker-controls {
    margin: 0 0 2rem;
}
.state-tracker-controls-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: 6px;
}
@media (min-width: 900px) {
    .state-tracker-controls-inner {
        grid-template-columns: minmax(0, 22rem) 1fr;
        gap: 1.5rem 2rem;
    }
}

.state-tracker-search {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.state-tracker-search-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}
.state-tracker-search input {
    font-family: var(--font-serif);
    font-size: 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--rule);
    background: var(--bg);
    border-radius: 4px;
    width: 100%;
    color: var(--text);
}
.state-tracker-search input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

.state-tracker-filter {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.state-tracker-filter-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
    padding: 0;
    margin-bottom: 0.5rem;
}
.state-tracker-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-chip {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4375rem 0.875rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.filter-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.filter-chip-active {
    background: var(--primary);
    color: var(--bg);
    border-color: var(--primary);
}
.filter-chip-active:hover {
    background: var(--primary);
    color: var(--bg);
}

.state-tracker-results {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    margin: 1rem 0 0;
}

/* Grid */
.state-tracker-grid-wrap { margin: 0 0 3rem; }
.state-tracker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .state-tracker-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .state-tracker-grid { grid-template-columns: repeat(3, 1fr); }
}

/* State card */
.state-card {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    transition: border-color 150ms ease;
}
.state-card:hover { border-color: var(--primary); }

.state-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.state-card-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
}
.state-card-abbr {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: var(--surface);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    vertical-align: middle;
}
.state-card-fullname { flex: 1; }

.state-card-summary {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 0.875rem;
}

.state-card-details {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}
.state-card-details summary {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    padding: 0.25rem 0;
}
.state-card-details summary::-webkit-details-marker { display: none; }
.state-card-details summary::after {
    content: "  →";
    transition: transform 150ms ease;
    display: inline-block;
}
.state-card-details[open] summary::after { content: "  ↓"; }
.state-card-details summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.state-card-details-content {
    padding-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.state-card-details-content p {
    margin: 0 0 0.625rem;
}
.state-card-law strong { color: var(--primary); }
.state-card-notes {
    font-style: italic;
    color: var(--muted);
}
.state-card-reviewed {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0.75rem 0 0;
}
.state-card-confidence {
    font-weight: 600;
}
.confidence-high { color: var(--primary); }
.confidence-medium { color: var(--accent); }
.confidence-low { color: var(--muted); font-style: italic; }

.state-card-bill-status {
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 0 0.625rem;
    color: var(--text);
}
.state-card-bill-status strong { color: var(--primary); }
.state-card-sources,
.state-card-bills {
    margin: 0.75rem 0;
}
.state-card-sources h4,
.state-card-bills h4 {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 0.375rem;
}
.state-card-sources ul,
.state-card-bills ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.state-card-sources li,
.state-card-bills li {
    font-size: 0.875rem;
    margin: 0 0 0.25rem;
}
.state-card-source-type {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-left: 0.375rem;
}

/* Hidden state (set via JS for filter / search) */
.state-card[hidden] { display: none; }

/* No results */
.state-tracker-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-style: italic;
    grid-column: 1 / -1;
}
.state-tracker-reset-button {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    margin-left: 0.5rem;
}
.state-tracker-reset-button:hover { background: var(--primary); color: var(--bg); }

/* Methodology + Disclaimer */
.state-tracker-methodology,
.state-tracker-disclaimer {
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}
.state-tracker-methodology h2,
.state-tracker-disclaimer h2 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}
.state-tracker-methodology p,
.state-tracker-disclaimer p {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}

/* ----- Print ----- */
@media print {
    .site-header,
    .site-footer,
    .site-nav,
    .newsletter-cta,
    .pagination,
    .related-posts,
    .skip-link { display: none; }
    body { background: white; color: black; font-size: 11pt; }
    a { color: black; text-decoration: underline; }
    .post-title, h1, h2, h3 { color: black; }
}