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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--md-sys-color-on-surface);
    background: #fff;
}

a { color: var(--brand-accent-red); }
a:hover { color: var(--md-sys-color-primary); }

/* Page shell — white side columns flanking the centered content well. */
.page-shell {
    display: flex;
    min-height: 100vh;
    background: #fff;
}
.side-col {
    position: relative;
    flex: 1 1 0;
    background: #fff;
}
.main-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 860px;
}
@media (max-width: 1000px) {
    .side-col { display: none; }
}

/* Side-column decoration — styled after the pale duotone Americana
   photography on U.S. passport visa pages: desaturated eagle/wheat-field
   imagery at very low opacity, fading toward the center content well
   rather than competing with it. Kept on a separate pseudo-element (not
   applied via `opacity` on .side-col itself) so each layer's faintness is
   independent and nothing here touches real content if these columns are
   ever put to other use. */
.side-col::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 150% auto;
    opacity: 0.24;
}
.side-col::after {
    content: '';
    position: absolute;
    top: 1rem;
    width: 84px;
    height: 84px;
    background-image: url('/images/decor/betsy-ross-flag.svg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.35;
}
/* Left column: a vertical montage (Grand Teton peaks+sky -> alpine forest ->
   wheat field -> bison on the plains) pre-composited into one tall image
   that cross-fades between scenes and dissolves to white at its own bottom
   edge. Mountain leads at the top since it holds contrast well at low
   opacity (and keeps a little blue sky above the peaks); the sky-heavy
   wheat photo washes out too much to survive as the lead image, so it sits
   as its own band well below the forest, clear of the fade between them.
   Repeated a second time (the eagle) further down so long pages don't run
   out of imagery — using the "-repeat"/"repeat" variants, which have a
   fade-in baked into their own top edge (the originals start opaque at
   row 0, correct only for a column's lead image). The offset is computed
   from the same 150%-of-column-width background-size math (75 *
   aspect-ratio, in vw, minus the matching 860px-main-column term, plus a
   40px gap) so the second image starts right where the first one's
   rendered box ends, at any viewport width. */
.side-col-left::before {
    background-image: url('/images/decor/americana-montage-left.png'), url('/images/decor/eagle-duotone-repeat.png');
    background-position: left top, left calc(147.3vw - 1227px);
    mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 85%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 85%);
}
/* Right column: bald eagle, anchored so the head (in the left half of the
   source crop) stays in frame rather than the tail/talons; the montage
   repeats below it for long pages (same scaling-aware offset approach, and
   also using its "-repeat" variant with a baked-in top fade-in). */
.side-col-right::before {
    background-image: url('/images/decor/eagle-duotone.png'), url('/images/decor/americana-montage-left-repeat.png');
    background-position: left top, left calc(102.8vw - 844px);
    mask-image: linear-gradient(to left, #000 0%, #000 45%, transparent 85%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 45%, transparent 85%);
}
.side-col-left::after { right: 2rem; }
.side-col-right::after { left: 2rem; }

/* Table of contents — injected into .side-col-left by js/toc.js from the
   active article's own h2/h3 headings (see that file for when it declines
   to run). Sits above the column's decorative ::before/::after layers via
   z-index, and is anchored to the column's right edge — nearer the main
   content well, where the decorative background is already faded out by
   the mask-image gradient above, so real text never competes with it. */
page-toc { display: contents; }
#toc {
    position: sticky;
    top: 5rem;
    z-index: 2;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: 2rem;
    width: 230px;
    max-width: calc(100% - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-family: system-ui, sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
}
.toc-heading {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}
.toc-list, .toc-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.toc-list > li { margin-bottom: 0.35rem; }
.toc-sublist { margin: 0.35rem 0 0.5rem 0.85rem; }
.toc-sublist > li { margin-bottom: 0.3rem; }
#toc .toc-sublist a, #toc .toc-sublist a:visited { font-size: 0.92em; }
/* :visited is styled explicitly because these are same-page fragment
   links -- Chrome marks a #hash link "visited" as soon as it's clicked, and
   without this the UA default visited color would override the link color
   above (:visited wins the color property regardless of the higher
   specificity here; only rules that themselves match :visited are
   considered) as soon as a reader used the TOC once. */
/* background/font-size/padding are set explicitly (not just color/border)
   because the h3 sublist is a <ul>, which also matches the site's top-nav
   selector `nav ul li a` -- that rule's red active background, larger
   font-size, and roomier padding would otherwise win here, since nothing
   in this block competed with them on those properties (the h2-level list
   is an <ol>, so it doesn't match `nav ul li a` and was never affected). */
#toc a, #toc a:visited {
    display: block;
    background: none;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    border-left: 2px solid transparent;
    font-size: inherit;
    padding: 0 0 0 0.6rem;
}
#toc a:hover, #toc a:visited:hover { color: var(--brand-accent-red); }
#toc a.active, #toc a:visited.active {
    background: none;
    color: var(--brand-accent-red);
    border-left-color: var(--brand-accent-red);
    font-weight: 600;
}

/* Site header — cropped title band from the 1823 Stone facsimile engraving of
   the Declaration, carrying its own period calligraphy
   ("In Congress, July 4, 1776 / The unanimous Declaration..."). */
.site-header {
    padding: 1rem 0 0.75rem;
    background: #fff;
}
.site-header a {
    display: block;
}
.header-title-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Nav */
nav {
    background: var(--md-sys-color-primary);
    padding: 0;
}
nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 860px;
    margin: 0 auto;
}
nav ul li a {
    display: block;
    padding: 0.75rem 1.2rem;
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
nav ul li a:hover,
nav ul li a.active {
    background: var(--brand-accent-red);
    color: var(--md-sys-color-on-error);
}

/* Informational tooltips */
.tt {
    position: relative;
    border-bottom: 1px dotted #8a6d3b;
    cursor: help;
}
.tt-bubble {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease 1s, visibility 0s linear 0.5s;
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 20;
    width: 280px;
    margin-bottom: 6px;
    padding: 0.75rem 1rem;
    background: #fdf6e3;
    border: 1px solid #8a6d3b;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 0.85rem;
    line-height: 1.4;
    color: #333;
    white-space: normal;
}
.tt-bubble a {
    display: inline-block;
    margin-top: 0.4rem;
}
.tt-bubble small {
    display: block;
    margin-top: 0.2rem;
    color: #888;
}
.tt:hover .tt-bubble,
.tt:focus-within .tt-bubble,
.tt:focus .tt-bubble {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s ease, visibility 0s linear;
}

/* Layout */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

h1 {
    font-size: 1.9rem;
    color: var(--md-sys-color-primary);
    margin-bottom: 0.4rem;
    line-height: 1.25;
}
h2 {
    font-size: 1.25rem;
    color: var(--md-sys-color-primary);
    margin: 2rem 0 0.6rem;
    border-bottom: 2px solid var(--brand-accent-red);
    padding-bottom: 0.25rem;
}
h3 {
    font-size: 1.05rem;
    color: var(--md-sys-color-primary);
    margin: 1.5rem 0 0.4rem;
}

p { margin-bottom: 1rem; }

.intro {
    background: var(--md-sys-color-surface-container-low);
    border-left: 4px solid var(--brand-accent-red);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* Declaration text */
.declaration-text p {
    margin-bottom: 0.85rem;
    text-align: justify;
}

/* Print-friendly view (declaration.php/rough-draft.php with ?print=1, and
   the static declaration-print.html/rough-draft-print.html generated from
   it): hides site chrome on screen too, since this view exists specifically
   to be printed or read chrome-free, not just when sent to a printer. */
.print-view .site-header,
.print-view nav,
.print-view footer,
.print-view .side-col {
    display: none;
}
.print-view .page-shell {
    justify-content: center;
}
.print-notice {
    background: var(--md-sys-color-surface-container-low);
    border-left: 4px solid var(--brand-accent-red);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.print-notice button {
    margin-left: 0.5rem;
    font: inherit;
    cursor: pointer;
}
.print-site-url {
    color: #666;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin: -0.75rem 0 0.75rem;
}
/* Footnoted phrases and the struck slavery passage keep their semantic
   markup in print mode, but lose the on-screen yellow/red highlighting —
   the footnote number already marks the edited text, and the highlight
   colors don't serve a printed handout. */
.print-view .edited-passage {
    background: none;
}
.print-view .struck-passage {
    background: none;
    border: none;
    padding: 1.25rem 0;
}
.print-view .struck-label {
    background: none;
    color: inherit;
    padding: 0;
}
@media print {
    .print-view .no-print { display: none !important; }
}

/* Native browser print of the *interactive* declaration.php/rough-draft.php
   (no ?print=1): editTooltip()/draftTooltip() always queue a footnote
   reference alongside the hover span (see printFootnoteRef() in
   tooltips.php), but it stays hidden on screen -- .footnote-ref.print-only
   and .print-footnotes only appear in the print-friendly view above or
   when actually printed. header.php tags the body with .page-with-print-view
   on both declaration.php and rough-draft.php (print mode or not) so this
   stays off every other page, per the "only these two pages" scope. */
.footnote-ref.print-only,
.print-footnotes {
    display: none;
}
.print-view .footnote-ref.print-only {
    display: inline;
}
.print-view .print-footnotes {
    display: block;
}
@media print {
    .page-with-print-view .footnote-ref.print-only {
        display: inline;
    }
    .page-with-print-view .print-footnotes {
        display: block;
    }
    .page-with-print-view .site-header,
    .page-with-print-view nav,
    .page-with-print-view footer,
    .page-with-print-view .side-col,
    .page-with-print-view .no-print {
        display: none !important;
    }
    .page-with-print-view .page-shell {
        justify-content: center;
    }
    .page-with-print-view .tt {
        border-bottom: none;
        cursor: default;
    }
    .page-with-print-view .edited-passage {
        background: none;
    }
    .page-with-print-view .struck-passage {
        background: none;
        border: none;
        padding: 1.25rem 0;
    }
    .page-with-print-view .struck-label {
        background: none;
        color: inherit;
        padding: 0;
    }
}

/* Footnotes */
.footnotes {
    font-size: 0.85rem;
    color: #666;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 0.75rem;
    margin: 1.5rem 0;
}
.footnotes li { margin-bottom: 0.5rem; }
sup.footnote-ref a { text-decoration: none; }

/* Grievances list */
.grievances {
    list-style: none;
    padding: 0;
}
.grievances li {
    padding: 0.4rem 0 0.4rem 1.5rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    position: relative;
}
.grievances li::before {
    content: "»";
    color: var(--brand-accent-red);
    position: absolute;
    left: 0;
}

/* Signers grid */
.signers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.signers-state h3 { margin-top: 0; font-size: 0.95rem; }
.signers-state ul { list-style: none; font-size: 0.88rem; }
.signers-state ul li { padding: 0.1rem 0; }

/* Struck passage (text deleted by Congress) */
.struck-label {
    display: inline-block;
    background: var(--brand-accent-red);
    color: var(--md-sys-color-on-error);
    font-size: 0.78rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.5rem;
}
.struck-passage {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: 2px solid var(--brand-accent-red);
    padding: 1.25rem 1.5rem;
    margin: 0.5rem 0 1.5rem;
}
.struck-passage p {
    text-align: justify;
    margin-bottom: 0;
}
.edited-passage {
    background: yellow;
}
/* Petition form */
.petition-text {
    background: var(--md-sys-color-surface-container-low);
    border: 2px solid var(--brand-accent-red);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-style: italic;
}

form .field {
    margin-bottom: 1.1rem;
}
form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
    color: var(--md-sys-color-primary);
}
form input[type="text"],
form input[type="email"] {
    width: 100%;
    max-width: 420px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--md-sys-color-outline);
    font-family: inherit;
    font-size: 1rem;
}
form input:focus { outline: 2px solid var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }

.btn {
    display: inline-block;
    background: var(--brand-accent-red);
    color: var(--md-sys-color-on-error);
    padding: 0.65rem 1.6rem;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.5rem;
}
.btn:hover { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

/* Petition signatories */
.signatories-heading {
    margin-top: 2rem;
    font-size: 1.05rem;
    color: var(--md-sys-color-primary);
    border-bottom: 2px solid var(--brand-accent-red);
    padding-bottom: 0.25rem;
}
.signatories {
    list-style: none;
    padding: 0;
    margin-top: 0.75rem;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
}
.signatories li {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.92rem;
}
.signatories li:last-child { border-bottom: none; }
.sig-date {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.82rem;
    float: right;
}

/* Homepage card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}
.card {
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.card img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.card-body {
    padding: 1rem 1.1rem 1.2rem;
}
.card-body h2,
.card-body h3 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.card-body h3 { font-size: 1.05rem; }
.card-body p {
    font-size: 0.92rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 0;
}
.card.featured {
    grid-column: span 2;
    flex-direction: row;
}
.card.featured img {
    width: 45%;
    height: auto;
    flex-shrink: 0;
}
.card.featured .card-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card.featured h2 { font-size: 1.4rem; color: var(--md-sys-color-primary); }
.card.featured p { font-size: 1rem; }
.card-text-only .card-body { padding-top: 1.25rem; }

/* Floated figures */
figure.fig {
    margin: 0 0 1.25rem 1.5rem;
    max-width: 220px;
}
figure.fig.fig-left {
    float: left;
    margin: 0 1.5rem 1.25rem 0;
}
figure.fig.fig-right {
    float: right;
}
figure.fig img {
    display: block;
    width: 100%;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: #fff;
}
figure.fig figcaption {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    margin-top: 0.35rem;
    font-style: italic;
}
.fig-compare {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0 1.5rem;
    clear: both;
}
.fig-compare figure.fig {
    float: none;
    margin: 0;
    max-width: none;
    flex: 1;
}
.fig-compare figure.fig img {
    width: 100%;
    height: auto;
}

/* How-to steps */
.steps { counter-reset: step; }
.steps li {
    counter-increment: step;
    list-style: none;
    padding: 0.6rem 0 0.6rem 3rem;
    border-bottom: 1px solid #eee;
    position: relative;
}
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.5rem;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-family: sans-serif;
}

blockquote.template-letter {
    background: var(--md-sys-color-surface-container-low);
    border-left: 4px solid var(--md-sys-color-primary);
    padding: 1rem 1.25rem;
    font-style: italic;
    margin: 1.5rem 0;
    white-space: pre-line;
}

/* Poem */
.poem {
    white-space: pre-line;
    font-size: 1.05rem;
    line-height: 1.9;
    max-width: 600px;
}

/* Footer */
footer {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary-container);
    text-align: center;
    padding: 1.25rem;
    font-size: 0.88rem;
}
footer a { color: #ffc0c0; }
footer a:hover { color: #fff; }

.footer-left-block {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}

.footer-intro { margin-bottom: 1rem; }
.footer-mission {
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}
.footer-tagline {
    font-size: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.footer-source { margin: 1rem auto 0; }

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    text-align: left;
    max-width: 720px;
    margin: 0 auto 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.footer-col { flex: 1 1 200px; }
.footer-col h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.4rem;
}
.footer-col h3.footer-col-subhead { margin-top: 0.75rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { padding: 0.15rem 0; }

.footer-donate { flex: 1 1 220px; }
.footer-donate p { margin: 0 0 0.5rem; }
.footer-donate-pledge { font-size: 0.85rem; }
.btn-donate { padding: 0.45rem 1.1rem; font-size: 0.9rem; }
.footer-donate-disclosure {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

@media (max-width: 600px) {
    h1 { font-size: 1.4rem; }
    nav ul li a { padding: 0.6rem 0.8rem; font-size: 0.85rem; }
    .signers { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    figure.fig.fig-left, figure.fig.fig-right { float: none; margin: 0 auto 1.25rem; max-width: 260px; }
    .fig-compare { flex-direction: column; }
    .footer-columns { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
    .card-grid { grid-template-columns: 1fr; }
    .card.featured { grid-column: span 1; flex-direction: column; }
    .card.featured img { width: 100%; height: 150px; }
}