:root {
    /* Autumn Woods palette — warm bark/rust tones instead of corporate blue-gray */
    --blue-600:   #B4501E; /* accent — rust/terracotta */
    --blue-700:   #93400F; /* accent hover, darker rust */
    --blue-50:    #F5E6D8; /* accent tint, for badge/hover backgrounds */
    --gray-50:    #FAF6EE; /* page background — warm cream */
    --gray-100:   #F3EBDC;
    --gray-200:   #E7D9C1;
    --gray-300:   #D6C2A0;
    --gray-400:   #B8A47F;
    --gray-500:   #8C7B60;
    --gray-600:   #6B5D47;
    --gray-700:   #4A3728; /* primary — bark brown */
    --gray-800:   #382A1E;
    --gray-900:   #2E2620; /* near-black warm brown */
    --green-500:  #4F7942; /* forest green — kept for success states */
    --green-600:  #3D5F34;
    --orange-500: #C9A227; /* mustard — secondary accent for badges */
    --red-500:    #B33A2E; /* warm red — kept for error states */
    --radius:     8px;
    --shadow:     0 1px 3px rgba(46,38,32,.12), 0 1px 2px rgba(46,38,32,.08);
    --shadow-md:  0 4px 6px rgba(46,38,32,.10), 0 2px 4px rgba(46,38,32,.08);
    --shadow-lg:  0 10px 15px rgba(46,38,32,.12), 0 4px 6px rgba(46,38,32,.06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--gray-800);
    background: var(--gray-50);
    line-height: 1.5;
    overflow-x: hidden;
}

h1, h2, h3, .logo, .hero h1, .article-header h1 {
    font-family: 'Fraunces', Georgia, serif;
}

img, svg { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.section { padding: 64px 0; }
.section-alt { background: var(--gray-100); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--blue-700); }
.btn-outline { background: #FFFDF8; color: var(--gray-800); border-color: var(--gray-300); }
.btn-outline:hover { border-color: var(--gray-400); }
.btn-green { background: var(--green-600); color: #fff; }
.btn-green:hover { background: #2F4A28; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }

/* Cards */
.card {
    background: #FFFDF8;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-body { padding: 24px; }

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-blue   { background: var(--blue-50); color: var(--blue-700); }
.badge-green  { background: #E9F1E4; color: var(--green-600); }
.badge-orange { background: #FBF1D6; color: #96791D; }
.badge-gray   { background: var(--gray-100); color: var(--gray-600); }

/* Hero */
.hero {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110'%3E%3Cpath d='M0,20 C40,5 80,35 120,20 C160,5 200,35 220,20' stroke='rgba(255,255,255,0.07)' stroke-width='1' fill='none'/%3E%3Cpath d='M0,55 C40,40 80,70 120,55 C160,40 200,70 220,55' stroke='rgba(255,255,255,0.05)' stroke-width='1' fill='none'/%3E%3Cpath d='M0,90 C40,75 80,105 120,90 C160,75 200,105 220,90' stroke='rgba(255,255,255,0.04)' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #3E2C1C 0%, #1C140D 100%);
    background-repeat: repeat, no-repeat;
    color: #fff;
    padding: 72px 0;
    text-align: center;
}
.hero h1 { font-size: 2.4rem; font-weight: 600; margin: 0 0 16px; }
.hero p { color: #E3D5C2; font-size: 1.1rem; max-width: 640px; margin: 0 auto 28px; }

/* Nav */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFDF8;
    border-bottom: 1px solid var(--gray-200);
}
.site-nav .nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-nav .logo { font-weight: 600; font-size: 1.25rem; color: var(--gray-900); }
.site-nav .nav-links { display: flex; align-items: center; gap: 24px; }
.site-nav .nav-links a { color: var(--gray-700); font-size: .9rem; font-weight: 500; }
.site-nav .nav-links a:hover { color: var(--blue-600); text-decoration: none; }
.site-nav .nav-burger { display: none; }

@media (max-width: 768px) {
    .site-nav .nav-links {
        display: none;
        position: absolute;
        top: 64px; left: 0; right: 0;
        background: #FFFDF8;
        border-bottom: 1px solid var(--gray-200);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 20px;
        gap: 16px;
    }
    .site-nav .nav-links.open { display: flex; }
    .site-nav .nav-burger {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
    }
}

/* Footer */
.site-footer {
    background: var(--gray-900);
    color: var(--gray-400);
    padding: 48px 0 24px;
}
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
.site-footer h3 { color: #fff; font-size: .95rem; margin: 0 0 12px; }
.site-footer a { color: var(--gray-400); font-size: .875rem; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer .footer-bottom {
    border-top: 1px solid var(--gray-800);
    padding-top: 20px;
    font-size: .8rem;
    text-align: center;
}

@media (max-width: 700px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* US map state picker */
.us-map-wrap { max-width: 720px; margin: 0 auto 32px; }
.us-map { width: 100%; height: auto; display: block; }
.us-map .state-shape {
    fill: #FAF6EE;
    fill-opacity: .34;
    stroke: var(--gray-50);
    stroke-width: 1;
    cursor: pointer;
    transition: fill .15s, fill-opacity .15s;
}
.us-map .state-shape:hover { fill: var(--blue-600); fill-opacity: .88; }
.us-map a:focus-visible .state-shape { fill: var(--blue-700); fill-opacity: .9; outline: none; }

/* Custom hover tooltip (replaces the slow native <title> tooltip) */
.map-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--gray-900);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    transform: translate(-50%, -130%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .1s;
    z-index: 10;
}
.map-tooltip.visible { opacity: 1; }

.state-select-row { max-width: 420px; margin: 0 auto 40px; text-align: center; }
.state-select-row label { display: block; font-size: .875rem; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; }
.state-select-row select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: .95rem;
    color: var(--gray-800);
    background: #FFFDF8;
}

/* Article header */
.article-header {
    background: var(--gray-900);
    color: #fff;
    padding: 48px 0;
}
.article-header h1 { font-size: 1.95rem; font-weight: 600; margin: 0 0 8px; }
.article-header .meta { color: var(--gray-400); font-size: .875rem; }

@media (max-width: 640px) {
    .hero { padding: 48px 0; }
    .hero h1 { font-size: 1.75rem; }
}