:root {
    --bg: #f7f7f6;
    --surface: #ffffff;
    --text: #1d1b1a;
    --muted: #5f5a56;
    --border: #e3ddd8;
    --accent: #7a1f2b;
    --accent-hover: #5e1520;
    --accent-text: #ffffff;
    /* A shade darker than the accent: 11:1 on the page background, so links stand out from it. */
    --link: #6b1622;
    --alert-bg: #fdecea;
    --alert-text: #7a1f2b;
    /* Light accent wash behind the hovered or current "On this page" link. */
    --tint: #f2e7e8;
    --focus: #2563eb;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161413;
        --surface: #211e1c;
        --text: #f1ece8;
        --muted: #b3aba5;
        --border: #3a3431;
        --accent: #e0707e;
        --accent-hover: #ee8f9a;
        --accent-text: #1b0d10;
        --link: #e0707e;
        --alert-bg: #3a1b1f;
        --alert-text: #f6c1c7;
        --tint: #2e2224;
        --focus: #7aa2ff;
    }
}

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

/* Height of the sticky header. On phones the logo and links sit on two rows. In-page jumps, keyboard focus and
   the loophole page's sidebar all keep clear of it. */
:root { --header-h: 5.75rem; }
@media (min-width: 36rem) {
    :root { --header-h: 4.25rem; }
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
/* Leaves a little room above the lookup result when the page scrolls to it. */
#results { scroll-margin-top: 0.75rem; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* A heavier underline than the browser default, so links don't rely on color alone. */
a {
    color: var(--link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.14em; }

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

h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 1.25rem 0 0.5rem; }

/* Stays at the top while the page scrolls. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.brand {
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--accent);
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Tighter on phones, where the header wraps to two rows and stays on screen. */
@media (max-width: 35.99rem) {
    .site-header .wrap { padding-top: 0.5rem; padding-bottom: 0.5rem; row-gap: 0.15rem; }
}

/* main.wrap, so the .wrap padding doesn't override it. Panels already leave room at the bottom. */
main.wrap { padding-top: 2rem; }

.hero { margin-bottom: 2rem; }
.hero h1 { margin-bottom: 0.4rem; }
.subhead { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; color: var(--accent); margin: 0 0 1rem; }
.lede { font-size: 1.2rem; }

.panel, .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}
.panel { margin-bottom: 2rem; }

.lookup { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
label { font-weight: 600; }
.optional { font-weight: 400; color: var(--muted); font-size: 0.9rem; }

input, textarea {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
}
textarea { font-size: 0.95rem; resize: vertical; }

.button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--accent);
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
}
.button:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.button.primary { background: var(--accent); color: var(--accent-text); }
.button.primary:hover { background: var(--accent-hover); color: var(--accent-text); }
.lookup .button { justify-self: start; }

.alert {
    background: var(--alert-bg);
    color: var(--alert-text);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 1rem 0 0;
}

.muted { color: var(--muted); }

.cards { display: grid; gap: 1rem; margin-bottom: 2rem; }
.card h3 { margin-top: 0.25rem; }
.card-role {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.card-detail { margin-top: 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }

details summary { cursor: pointer; color: var(--muted); }
details[open] summary { margin-bottom: 0.75rem; }
.copy-label { margin: 0.25rem 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Consolas, monospace; }

.site-footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.9rem;
    padding: 1.5rem 0 1.5rem;
}

@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; }
    .actions .button { flex: 1 1 100%; }
    .lookup .button { justify-self: stretch; }
    .site-nav { gap: 0.25rem 0.75rem; font-size: 0.95rem; }
}

.hint { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--muted); }
details.street summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.street[open] summary { margin-bottom: 0.75rem; }
.note {
    background: var(--bg);
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin: 0;
}
.law-links { padding-left: 1.2rem; margin: 0.5rem 0 1rem; }
.law-links li { margin-bottom: 0.35rem; overflow-wrap: anywhere; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.compare > div { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; }
.compare dt { font-weight: 700; }
.compare dd { margin: 0.25rem 0 0; }
.timeline { list-style: none; padding: 0; margin: 1rem 0; }
.timeline li { border-left: 4px solid var(--accent); padding: 0 0 0.5rem 1rem; margin-bottom: 1rem; }
.timeline li p { margin: 0.35rem 0; overflow-wrap: anywhere; }
.timeline-when { font-weight: 700; color: var(--accent); }
details.state { border-top: 1px solid var(--border); padding: 0.6rem 0; }
details.state summary { cursor: pointer; font-weight: 600; }

.site-footer h2 { font-size: 1rem; margin: 1.5rem 0 0.75rem; color: var(--text); }

.disclaimers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem 2rem;
    margin: 0;
}
.disclaimers dt { font-weight: 600; color: var(--text); }
.disclaimers dd { margin: 0.2rem 0 0; }

.help {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 2rem 0;
}
.help h2 { font-size: 1.3rem; }
.help h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.help ul { padding-left: 1.1rem; margin: 0; }
.help li { margin-bottom: 0.4rem; }
.help-emergency { font-weight: 600; }
.hotline {
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.hotline p { margin: 0.25rem 0; }
.hotline-name { font-weight: 700; }
.hotline-number { font-size: 1.6rem; font-weight: 800; }
.hotline-number a { text-decoration: none; }
.resource-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.site-contact {
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.9rem;
    padding: 1rem 0 1.5rem;
}
.site-contact p { margin: 0; }
.site-contact a { overflow-wrap: anywhere; }

.site-copyright {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    padding: 0.75rem 0 1rem;
}
.site-copyright p { margin: 0; }
.site-copyright p + p { margin-top: 0.35rem; }

/* Goes across the full width of a grid, such as a note among the letter cards. */
.span-all { grid-column: 1 / -1; }

/* "On this page" list on the loophole page; shown only on wide screens. */
.toc { display: none; }
h2[id] { scroll-margin-top: 1rem; }

/* Desktop: the same design, using the width. Phones and tablets keep the single column above. */
@media (min-width: 64rem) {
    .wrap { max-width: 74rem; padding: 0 2rem; }

    /* Keeps long text at a comfortable line length while panels and grids use the full width. */
    main p, main li, main summary, .help p { max-width: 70ch; }

    /* Intro text beside the lookup form. */
    .top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 27rem;
        gap: 3rem;
        align-items: start;
        margin-bottom: 2rem;
    }
    .top .hero, .top .panel { margin-bottom: 0; }
    /* The form column is too narrow for ZIP and name side by side. */
    .top .field-row { grid-template-columns: 1fr; }
    .top .zip input { max-width: 12rem; }

    /* Letter cards two or three across; each keeps its own height when its message is opened. */
    .cards { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); align-items: start; }

    .columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        align-items: start;
        margin-bottom: 2rem;
    }
    /* The grid gap spaces the panels, so their own bottom margin would double it between rows. */
    .columns > .panel { margin-bottom: 0; }
    /* Panels that never change height (no expanding lists) match their neighbor's height. */
    .columns.pairs { align-items: stretch; }

    .with-toc {
        display: grid;
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
    .toc {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 1rem);
    }
    .toc-title {
        margin: 0 0 0.5rem;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
    .toc a {
        display: block;
        margin-left: -2px;
        padding: 0.35rem 0.5rem 0.35rem 0.9rem;
        border-left: 2px solid transparent;
        border-radius: 0 6px 6px 0;
        color: var(--muted);
        font-weight: 600;
        text-decoration: none;
    }
    .toc a:hover { color: var(--accent); background: var(--tint); }

    /* Highlights the section being read, with CSS scroll-driven animations instead of JavaScript (the site runs
       no scripts). Each section gets a view timeline narrowed to a 1px band 25% down the window; its link takes
       the highlight while that section crosses the band. Browsers without support just get the hover style. */
    @supports (animation-timeline: view()) and (timeline-scope: --a) {
        .with-toc { timeline-scope: --toc-how, --toc-cases, --toc-fixed, --toc-act; }
        .with-toc section { view-timeline-inset: 25% calc(75% - 1px); }
        .with-toc section[aria-labelledby="how-heading"] { view-timeline-name: --toc-how; }
        .with-toc section[aria-labelledby="cases-heading"] { view-timeline-name: --toc-cases; }
        .with-toc section[aria-labelledby="fixed-heading"] { view-timeline-name: --toc-fixed; }
        .with-toc section[aria-labelledby="act-heading"] { view-timeline-name: --toc-act; }

        /* Each highlight runs on through the 2rem gap after its section, so one link is always lit. The first
           link is lit before its section reaches the band, and the last one stays lit after. */
        .toc a {
            animation: toc-current linear none;
            animation-range: cover 0% cover calc(100% + 2rem - 1px);
        }
        .toc li:first-child a { animation-fill-mode: backwards; }
        .toc li:last-child a { animation-fill-mode: forwards; }
        .toc a[href$="#how-heading"] { animation-timeline: --toc-how; }
        .toc a[href$="#cases-heading"] { animation-timeline: --toc-cases; }
        .toc a[href$="#fixed-heading"] { animation-timeline: --toc-fixed; }
        .toc a[href$="#act-heading"] { animation-timeline: --toc-act; }
    }
}

@keyframes toc-current {
    from, to { color: var(--accent); background: var(--tint); border-left-color: var(--accent); }
}