/* Abolish Slavery National Network. Visual system per the ASNN Brand Guidelines, Edition 01, 2026:
   navy, gold, bone. Roboto Slab display, IBM Plex Sans body, IBM Plex Mono for labels and citations.
   Gold is spent on rules, marks, and one word per section. Navy carries the hero, the books, and the close. */
:root{
  --navy:#14213D;
  --navy-deep:#0B1730;
  --navy-ink:#0A0F1F;
  --gold:#F2B431;
  --gold-soft:#F5C861;
  --bone:#F2EFE6;
  --bone-deep:#E9E4D5;
  --bone-rule:#D9D2BF;
  --ink:#14213D;
  --ink-70:rgba(20,33,61,.72);
  --ink-50:rgba(20,33,61,.64);
  --rule:rgba(20,33,61,.18);
  --rule-strong:rgba(20,33,61,.85);
  --on-navy:#F2EFE6;
  --on-navy-70:rgba(242,239,230,.72);
  --on-navy-rule:rgba(242,239,230,.18);
  --maxw:1140px;
  --measure:66ch;
  --display:'Roboto Slab',Georgia,'Times New Roman',serif;
  --body:'IBM Plex Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}

/* type */
h1,h2,h3,.display{font-family:var(--display);font-weight:700;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,6.4vw,84px)}
h2{font-size:clamp(30px,3.8vw,48px);margin-bottom:22px}
h3{font-size:clamp(20px,2vw,24px);margin-bottom:10px;line-height:1.2}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-70)}
p{margin:0 0 16px;max-width:var(--measure)}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:58ch}
.small{font-size:14px;color:var(--ink-70)}
strong{font-weight:600}
ul,ol{max-width:var(--measure);padding-left:22px;margin:0 0 16px}
li{margin-bottom:8px}
.cite{font-family:var(--mono);font-size:13px;color:var(--ink-70);line-height:1.5}
.gold{color:var(--gold)}
blockquote{margin:0 0 20px;padding-left:20px;border-left:3px solid var(--gold);max-width:var(--measure)}
blockquote p{margin-bottom:8px}
blockquote .big{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.25;font-weight:400}

/* masthead */
.masthead{background:var(--bone);border-bottom:1px solid var(--rule-strong);position:sticky;top:0;z-index:10}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:290px;max-width:60vw;display:block}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap;align-items:center}
.nav a{text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--gold)}
.nav a.cta{background:var(--navy);color:var(--on-navy);padding:9px 16px;border-radius:2px;border:0}
.nav a.cta:hover{background:var(--navy-deep)}

/* hero */
.hero{background:var(--navy);color:var(--on-navy);border-top:6px solid var(--gold)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding-block:72px 64px}
.hero .label{color:var(--gold)}
.hero h1{margin:18px 0 26px}
.hero h1 .gold{color:var(--gold)}
.hero .lede{color:var(--on-navy);max-width:56ch}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.02em;padding:13px 22px;border-radius:2px;border:2px solid var(--gold)}
.btn.solid{background:var(--gold);color:var(--navy-ink)}
.btn.solid:hover{background:var(--gold-soft)}
.btn.ghost{color:var(--on-navy)}
.btn.ghost:hover{background:rgba(242,180,49,.12)}
.hero-clause{border:1px solid var(--on-navy-rule);padding:26px 26px 22px;background:var(--navy-deep)}
.hero-clause .label{margin-bottom:12px;display:block}
.hero-clause .quote{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.6vw,21px);line-height:1.45;margin-bottom:14px;max-width:none}
.hero-clause .quote u{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.hero-clause .cite{color:var(--on-navy-70)}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:52px 48px}}

/* fact strip: the dates and counts are the information */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule-strong)}
.facts > div{padding:28px 24px 26px 0;border-right:1px solid var(--rule)}
.facts > div + div{padding-left:24px}
.facts > div:last-child{border-right:0}
.facts .display{font-size:clamp(34px,3.6vw,52px);margin-bottom:8px;font-variant-numeric:tabular-nums;line-height:1}
.facts p{margin:0;font-size:15px;color:var(--ink-70)}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts > div:nth-child(2n){border-right:0}.facts > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}.facts > div{border-right:0;border-bottom:1px solid var(--rule);padding-left:0}.facts > div:last-child{border-bottom:0}}

/* sections */
section{padding-block:64px}
section + section{border-top:1px solid var(--rule)}
section .label{display:block;margin-bottom:14px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.grid-side{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:56px;align-items:start}
@media(max-width:860px){.grid-2,.grid-side{grid-template-columns:minmax(0,1fr)}}

/* the definition */
.definition{border-top:3px solid var(--gold);padding-top:22px}
.definition .quote{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);line-height:1.3;font-weight:400;max-width:26ch;margin-bottom:14px}
.definition .quote em{font-style:normal;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:5px}
.predicate{border-top:1px solid var(--rule-strong);margin-top:8px}
.predicate > div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.predicate .k{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--gold)}
.predicate p{margin:0;font-size:15px}
.powers{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none;max-width:none}
.powers li{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule-strong)}

/* is / is not */
.isnot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--rule-strong)}
.isnot > div{padding:28px 32px 28px 0}
.isnot > div + div{border-left:1px solid var(--rule);padding-left:32px;padding-right:0}
.isnot h3{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:18px}
.isnot .item{padding:14px 0;border-top:1px solid var(--rule)}
.isnot .item:first-of-type{border-top:0}
.isnot .item b{display:block;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;margin-bottom:6px}
.isnot .item p{margin:0;font-size:15.5px}
@media(max-width:860px){.isnot{grid-template-columns:minmax(0,1fr)}.isnot > div{padding-right:0}.isnot > div + div{border-left:0;border-top:1px solid var(--rule-strong);padding-left:0}}

/* five lines */
.lines{border-top:1px solid var(--rule-strong)}
.lines > div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--rule)}
.lines .k{font-family:var(--display);font-size:34px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.lines h3{margin-bottom:6px}
.lines p{margin:0;font-size:15.5px}
.aside{border:1px solid var(--rule-strong);padding:22px 24px;background:var(--bone-deep)}
.aside .label{margin-bottom:10px}
.aside p{font-size:15.5px}
.aside p:last-child{margin-bottom:0}

/* the books: two covers on navy */
.books{background:var(--navy);color:var(--on-navy);border-top:0}
.books .label{color:var(--gold)}
.books h2{color:var(--on-navy)}
.books .lede{color:var(--on-navy-70)}
.shelf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:40px}
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
.book img{display:block;width:100%;box-shadow:0 30px 50px -20px rgba(0,0,0,.7),0 0 0 1px rgba(242,239,230,.12)}
.book h3{color:var(--on-navy);font-size:clamp(21px,2vw,26px);margin-bottom:8px}
.book .sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.book p{font-size:15.5px;color:var(--on-navy)}
.book .cite{color:var(--on-navy-70)}
.book ul{padding-left:18px;font-size:15px;color:var(--on-navy)}
.book li{margin-bottom:5px}
.books .rights{border-top:1px solid var(--on-navy-rule);margin-top:44px;padding-top:22px;color:var(--on-navy-70);font-size:14px;max-width:none}
.books .rights a{color:var(--on-navy)}
@media(max-width:1000px){.shelf{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.book{grid-template-columns:minmax(0,1fr)}.book img{max-width:260px}}

/* timeline */
.timeline{border-top:1px solid var(--rule-strong)}
.tl{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.tl .when{font-family:var(--display);font-size:18px;line-height:1.25;font-variant-numeric:tabular-nums}
.tl .what p{margin:0 0 6px;max-width:var(--measure);font-size:15.5px}
.tl .what p:last-child{margin-bottom:0}
.tl.marker .when{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:5px}
@media(max-width:600px){.tl{grid-template-columns:minmax(0,1fr);gap:6px}}

/* join */
.join .grid-2{align-items:start}
.contact{border-top:3px solid var(--gold);padding-top:20px}
.contact p{margin-bottom:10px}
.contact a.mail{font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:19px}
.socials{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0}
.socials li{margin:0;font-size:15px}
.socials a{text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.tags{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--navy)}
.people{border-top:1px solid var(--rule-strong)}
.people > div{padding:14px 0;border-bottom:1px solid var(--rule)}
.people b{display:block;font-weight:600}
.people span{font-size:14px;color:var(--ink-70)}

/* close: the Spanish line */
.close{background:var(--navy);color:var(--on-navy);padding-block:56px;border-top:6px solid var(--gold)}
.close .display{font-size:clamp(26px,4.2vw,56px);text-transform:uppercase;letter-spacing:.02em;color:var(--gold);max-width:none}

/* footer */
footer{background:var(--navy-ink);color:var(--on-navy-70);padding-block:40px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
footer img{width:220px;display:block;margin-bottom:16px}
footer p{max-width:none;margin-bottom:10px}
footer .label{color:var(--gold);display:block;margin-bottom:10px}
footer nav a{display:block;text-decoration:none;padding:3px 0}
footer nav a:hover{color:var(--on-navy)}
footer a{color:var(--on-navy)}
@media(max-width:860px){footer .wrap{grid-template-columns:minmax(0,1fr)}}

/* the map: one path per state, colored by status; hover in gold; the side panel carries the state's text */
.mapsec{background:var(--bone-deep)}
.maplayout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;align-items:start;margin-top:8px}
.mapbox{position:relative}
.usmap{display:block;width:100%;height:auto}
.usmap .states path,.usmap .states circle{stroke:var(--bone);stroke-width:1;cursor:pointer;transition:fill .12s}
.usmap .other{fill:#8A97B4}
.usmap .organizing{fill:var(--navy)}
.usmap .removed{fill:#4E6CB0}
.usmap [data-st]:hover,.usmap [data-st]:focus-visible,.usmap .pinned{fill:var(--gold);outline:0}
.usmap .separator{stroke:rgba(20,33,61,.35);stroke-width:2;fill:none}
.maptip{position:absolute;pointer-events:none;background:var(--navy-ink);color:var(--on-navy);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;white-space:nowrap;z-index:2}
.mapside select{display:block;width:100%;margin:8px 0 18px;padding:11px 12px;font:inherit;font-size:15px;color:var(--ink);background:var(--bone);border:1px solid var(--rule-strong);border-radius:2px}
.mapinfo{border-top:3px solid var(--gold);background:var(--bone);padding:18px 20px;min-height:160px}
.mapinfo-name{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:8px}
.mapinfo-text{font-size:15px;margin:0}
.maplegend{list-style:none;padding:0;margin:20px 0 10px;font-size:14px}
.maplegend li{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sw{display:inline-block;width:18px;height:18px;flex:0 0 auto;border:1px solid rgba(20,33,61,.25)}
.sw.other{background:#8A97B4}.sw.organizing{background:var(--navy)}.sw.removed{background:#4E6CB0}
@media(max-width:900px){.maplayout{grid-template-columns:minmax(0,1fr)}}

/* the territories: the class that cannot vote on the exception */
.usmap .imposed rect,.usmap .imposed.tile rect{fill:#C5462A;stroke:var(--bone);stroke-width:1;cursor:pointer;transition:fill .12s}
.usmap .tile:hover rect,.usmap .tile:focus-visible rect,.usmap .tile.pinned rect{fill:var(--gold)}
.usmap .tile text{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.08em;fill:var(--bone);pointer-events:none}
.usmap .tile:hover text,.usmap .tile.pinned text{fill:var(--navy-ink)}
.usmap .tlabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:var(--ink-70)}
.sw.imposed{background:#C5462A}

.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:900px){.people-grid{grid-template-columns:minmax(0,1fr)}}

/* citation links: quiet underline, gold on hover, so an authority reads as text until you reach for it */
main a.cite-link{text-decoration:none;border-bottom:1px solid rgba(20,33,61,.45)}
main a.cite-link:hover{border-bottom-color:var(--gold);color:var(--navy)}
.hero a.cite-link,.books a.cite-link{border-bottom-color:rgba(242,239,230,.5)}

/* power bubbles: a description of how each ownership power is exercised in custody */
.powers li{position:relative;cursor:help;outline:0}
.powers li:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.powers li::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 10px);width:min(34ch,80vw);background:var(--navy-ink);color:var(--on-navy);font-family:var(--body);font-size:14px;line-height:1.5;letter-spacing:0;text-transform:none;padding:12px 14px;border-top:3px solid var(--gold);z-index:5;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.powers li::before{content:"";position:absolute;left:14px;top:calc(100% + 4px);border:6px solid transparent;border-bottom-color:var(--gold);z-index:6;opacity:0;visibility:hidden;transition:opacity .15s}
.powers li:hover::after,.powers li:focus::after,.powers li:focus-visible::after,.powers li:hover::before,.powers li:focus::before,.powers li:focus-visible::before{opacity:1;visibility:visible;transform:none}
.powers li:hover,.powers li:focus{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
@media(prefers-reduced-motion:reduce){.powers li::after{transition:none}}

/* three terms: one row, three columns, each a definition with its source */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-strong)}
.terms > div{padding:24px 28px 24px 0;border-right:1px solid var(--rule)}
.terms > div + div{padding-left:28px}
.terms > div:last-child{border-right:0;padding-right:0}
.terms h3{margin:8px 0 12px}
.terms .def{font-family:var(--display);font-weight:400;font-size:17px;line-height:1.4;margin-bottom:8px}
.terms p{font-size:15px}
@media(max-width:900px){.terms{grid-template-columns:minmax(0,1fr)}.terms > div{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}.terms > div:last-child{border-bottom:0}}

/* the New Jersey panel: thin bars on one 0 to 3 scale, single hue; the lived record as a gold line */
.panel{align-items:start}
.panel figure{margin:0;min-width:0}
.panel figcaption{font-size:15px;margin-bottom:10px}
.chart{display:block;width:100%;height:auto;font-family:var(--body)}
.chart .grid{stroke:rgba(20,33,61,.14);stroke-width:1}
.chart .tick{font-family:var(--mono);font-size:12px;fill:var(--ink-70)}
.chart .lab{font-size:13.5px;fill:var(--ink)}
.chart .bar rect{fill:var(--navy);transition:fill .12s}
.chart .bar:hover rect{fill:var(--navy-deep)}
.chart .val{font-family:var(--mono);font-size:12.5px;fill:var(--ink)}
.chart .lived{stroke:var(--gold);stroke-width:3}
.chart .lived-t{fill:var(--ink-70)}
.chart .absent{fill:none;stroke:rgba(20,33,61,.35);stroke-dasharray:4 4}
.chart .absent-t{font-family:var(--mono);font-size:12px;letter-spacing:.06em;fill:var(--ink)}
.tableview{margin-top:18px}
.tableview summary{cursor:pointer;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70)}
.tablewrap{overflow-x:auto;margin-top:12px}
.tablewrap table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.tablewrap th,.tablewrap td{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tablewrap th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-70)}
.tablewrap td.num{font-family:var(--display);font-size:20px;line-height:1}

/* instrument abbreviations need a wider key column */
.lines.keyed > div{grid-template-columns:96px minmax(0,1fr)}
.lines.keyed .k{font-size:22px;line-height:1.15;word-break:keep-all}

.lang{font-family:var(--mono);font-size:12px;letter-spacing:.12em}.lang a{text-decoration:none;padding:4px 6px;border:1px solid var(--rule-strong)}.lang a[aria-current]{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}

.nav a.cta.donate{background:var(--gold);color:var(--navy-ink)}
.nav a.cta.donate:hover{background:var(--gold-soft)}

/* CAES hero: the cover beside the title, the one-idea box beneath it */
.hero-book{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:22px;align-items:start}
.hero-book img{display:block;width:100%;box-shadow:0 30px 50px -20px rgba(0,0,0,.7),0 0 0 1px rgba(242,239,230,.12)}
.hero-book .hero-clause{padding:20px 20px 16px}
@media(max-width:600px){.hero-book{grid-template-columns:minmax(0,1fr)}.hero-book img{max-width:220px}}

/* CAES hero, stacked: the cover large, the one-idea box beneath it */
.hero-book{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:start}
.hero-book img{max-width:340px}
.hero-book .hero-clause{width:100%;padding:22px 24px 18px}

/* hero texture: the clause itself, set huge and faint into the navy */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero-bg{position:absolute;inset:-6% -4% auto -4%;font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,150px);line-height:.92;letter-spacing:-.02em;color:rgba(242,239,230,.045);text-transform:uppercase;pointer-events:none;user-select:none;z-index:0;text-wrap:balance}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,33,61,0) 40%,rgba(20,33,61,.9) 100%)}

/* hero texture, second pass: visible on ordinary screens */
.hero-bg{color:rgba(242,239,230,.11)}
.hero-bg::after{background:linear-gradient(180deg,rgba(20,33,61,.15) 0%,rgba(20,33,61,.55) 55%,rgba(20,33,61,.95) 100%)}

/* masthead, two rows: utility on top right, pages beneath */
.masthead .wrap{align-items:flex-start}
.nav.two-row{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:1 1 auto;min-width:0}
.nav.two-row .nav-util{display:flex;align-items:center;gap:10px}
.nav.two-row .nav-main{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 18px}
.nav.two-row .nav-util a.cta{padding:8px 14px;font-size:12.5px}
@media(max-width:760px){.masthead .wrap{flex-direction:column;align-items:stretch}.nav.two-row{align-items:flex-start}.nav.two-row .nav-main{justify-content:flex-start}}

/* masthead, navy: holds against the bone body when the hero scrolls away; the mark as a watermark */
.masthead{background:var(--navy-deep);border-bottom:1px solid rgba(242,239,230,.14);border-top:6px solid var(--gold);color:var(--on-navy);position:sticky;top:0;z-index:10;overflow:hidden;box-shadow:0 8px 24px -16px rgba(0,0,0,.6)}
.masthead::before{content:"";position:absolute;right:-60px;top:-120px;width:420px;height:420px;background:url("assets/mark-white.png") center/contain no-repeat;opacity:.06;pointer-events:none}
.masthead .wrap{position:relative}
.masthead .nav a{color:var(--on-navy)}
.masthead .nav a:hover{border-bottom-color:var(--gold)}
.masthead .nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.masthead .nav a.cta{background:var(--on-navy);color:var(--navy-ink)}
.masthead .nav a.cta:hover{background:#fff}
.masthead .nav a.cta.donate{background:var(--gold);color:var(--navy-ink)}
.masthead .lang a{border-color:rgba(242,239,230,.45);color:var(--on-navy)}
.masthead .lang a[aria-current]{background:var(--gold);color:var(--navy-ink);border-color:var(--gold)}
.hero{border-top:1px solid rgba(242,239,230,.08)}
.draft{background:var(--bone)}

/* anniversaries band */
.anniv{background:var(--navy);color:var(--bone)}
.anniv .label{color:var(--gold)}
.anniv h2{color:var(--bone)}
.anniv-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px}
.anniv-grid>div{border-top:1px solid rgba(242,239,230,.25);padding-top:22px}
.anniv .num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,120px);line-height:.9;color:var(--gold);letter-spacing:-.02em;margin-bottom:12px}
.anniv h3{font-family:var(--display);font-size:22px;line-height:1.25;margin:0 0 10px;color:var(--bone)}
.anniv p{color:rgba(242,239,230,.82);max-width:60ch}
@media(max-width:760px){.anniv-grid{grid-template-columns:1fr;gap:28px}}

/* photographs */
.photo{margin:0;background:var(--deep);color:var(--bone);position:relative}
.photo.band img{display:block;width:100%;height:auto;max-height:540px;object-fit:cover;object-position:center 35%}
.photo.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 0 20px;background:linear-gradient(rgba(11,23,48,0),rgba(11,23,48,.88))}
.photo.band figcaption p{font-family:var(--display);font-size:18px;line-height:1.35;margin:0;max-width:64ch;color:var(--bone)}
.photo figcaption .credit{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,239,230,.7)}
.photo.inline{float:right;width:min(320px,42%);margin:0 0 18px 32px;background:none;color:var(--ink)}
.photo.inline img{display:block;width:100%;height:auto;border:1px solid var(--rule-strong)}
.photo.inline figcaption{padding:8px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:var(--ink-70)}
.timeline{clear:none}
@media(max-width:700px){.photo.inline{float:none;width:100%;margin:0 0 22px}.photo.band figcaption p{font-size:15px}.photo.band figcaption{padding-top:40px}}

/* mural slot: drop the photograph at assets/photos/mural-jersey-city.jpg and it appears behind the home hero; nothing shows while the file is absent */
.hero-photo{position:absolute;inset:0;z-index:0;background:url("assets/photos/mural-jersey-city.jpg") right 58%/cover no-repeat;opacity:.72;pointer-events:none}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,33,61,.97) 0%,rgba(20,33,61,.9) 38%,rgba(20,33,61,.55) 62%,rgba(20,33,61,.25) 100%)}
html[lang="es"] .hero-photo{background-image:url("../assets/photos/mural-jersey-city.jpg")}

.hero:has(.hero-photo) .hero-bg{color:rgba(242,239,230,.05)}
.hero:has(.hero-photo) .hero-bg::after{background:linear-gradient(180deg,rgba(20,33,61,0) 0%,rgba(20,33,61,.2) 60%,rgba(20,33,61,.85) 100%)}

/* masthead: the End Slavery NJ mural as the header banner on every page, under a navy wash so the logo and nav read */
.masthead::before{right:0;top:0;width:100%;height:100%;background:url("assets/photos/mural-jersey-city.jpg") center 42%/cover no-repeat;opacity:.62}
.masthead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,23,48,.94) 0%,rgba(11,23,48,.78) 38%,rgba(11,23,48,.42) 68%,rgba(11,23,48,.22) 100%);pointer-events:none}
.masthead .wrap{z-index:1}
html[lang="es"] .masthead::before{background-image:url("../assets/photos/mural-jersey-city.jpg")}
/* hero: mural removed from the home hero at Dennis's direction 2026-09-22; the slot stays empty */
.hero-photo{display:none}
.hero:has(.hero-photo) .hero-bg{color:rgba(242,239,230,.11)}
.hero:has(.hero-photo) .hero-bg::after{background:linear-gradient(180deg,rgba(20,33,61,.15) 0%,rgba(20,33,61,.55) 55%,rgba(20,33,61,.95) 100%)}

/* footer social links */
footer .social a{display:inline-block;margin:0 10px 6px 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(242,239,230,.35);padding:5px 9px}
footer .social a:hover{border-color:var(--gold);color:var(--gold)}
footer .social .small{color:rgba(242,239,230,.6)}

/* YouTube Shorts on the Media page: vertical frames */
.vcard iframe.short{aspect-ratio:9/16;max-height:640px;width:100%;max-width:360px;margin:0 auto;object-fit:unset}
.vcard iframe.short.square{aspect-ratio:1/1;max-width:420px}

/* footer small print must read on navy */
footer .small{color:rgba(242,239,230,.62)}

/* collapsed menu on phones */
.menu-toggle{display:none;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy);background:transparent;border:1px solid rgba(242,239,230,.45);padding:8px 12px;cursor:pointer}
.menu-toggle:hover,.menu-toggle:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
@media(max-width:760px){
  .menu-toggle{display:inline-block;margin-left:auto}
  .nav.two-row .nav-util{flex-wrap:wrap;width:100%}
  .nav.two-row .nav-main{display:none;flex-direction:column;gap:0;width:100%;border-top:1px solid rgba(242,239,230,.18);margin-top:6px}
  .nav.two-row.open .nav-main{display:flex}
  .nav.two-row .nav-main a{padding:12px 0;border-bottom:1px solid rgba(242,239,230,.12);font-size:14px}
  .nav.two-row .nav-main a[aria-current="page"]{border-bottom:1px solid rgba(242,239,230,.12);color:var(--gold)}
}

/* social feeds on the Media page */
.feeds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:36px}
.feed iframe{display:block;width:100%;border:0;background:var(--navy-ink)}
.feed iframe:not(.fb){aspect-ratio:16/9}
.feed iframe.fb{height:640px;max-width:500px;background:#fff}
.feed .label{display:block;margin-bottom:10px}
@media(max-width:860px){.feeds{grid-template-columns:minmax(0,1fr)}}

/* provisional bars on the worked panels */
.chart .bar.prov rect{fill:rgba(20,33,61,.5);stroke:var(--navy);stroke-width:1;stroke-dasharray:5 4}

/* social icons, bottom left of the header bar */
.masthead .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:24px;row-gap:0;align-items:start}
.masthead .brand{grid-column:1;grid-row:1}
.masthead .nav.two-row{grid-column:2;grid-row:1 / span 2;justify-self:end}
.social-bar{grid-column:1;grid-row:2;align-self:end;display:flex;gap:6px;margin-top:10px}
.social-bar a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(242,239,230,.35);color:var(--on-navy);text-decoration:none;transition:border-color .12s,color .12s}
.social-bar a svg{width:17px;height:17px}
.social-bar a:hover,.social-bar a:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
@media(max-width:760px){.masthead .wrap{grid-template-columns:minmax(0,1fr)}.masthead .nav.two-row{grid-column:1;grid-row:3;justify-self:stretch}.social-bar{grid-row:2;margin:6px 0 10px}}

/* keep the page links on one row beside the logo column */
@media(min-width:761px){.nav.two-row .nav-main{gap:4px 14px}.masthead .brand img{max-width:250px}.masthead .wrap{column-gap:16px}}

/* the embedded one-pager on the CAES tab */
.onepager{margin:36px auto 8px;max-width:760px}
.onepager figcaption{font-size:15px;margin-bottom:12px}
.onepager a img{display:block;width:100%;height:auto;border:1px solid var(--rule-strong);box-shadow:0 18px 40px -24px rgba(11,23,48,.6);background:#fff}
.onepager .actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* outline buttons on light sections read in navy */
.terms .btn.ghost,.onepager .btn.ghost,.lines .btn.ghost,.aside .btn.ghost{color:var(--navy);border-color:var(--navy)}
.terms .btn.ghost:hover,.onepager .btn.ghost:hover,.aside .btn.ghost:hover{background:var(--navy);color:var(--on-navy)}

/* site search */
.search-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:1px solid rgba(242,239,230,.45);color:var(--on-navy);cursor:pointer;padding:0}
.search-toggle svg{width:18px;height:18px}
.search-toggle:hover,.search-toggle:focus-visible,.search-toggle[aria-expanded=true]{border-color:var(--gold);color:var(--gold);outline:none}
.sitesearch{position:fixed;left:0;right:0;top:0;bottom:0;z-index:40;background:rgba(11,23,48,.96);color:var(--on-navy);overflow-y:auto;padding:24px 0 40px}
.sitesearch .label{color:var(--gold)}
.ss-row{display:flex;gap:10px;align-items:center;margin-top:8px}
.sitesearch input{flex:1 1 auto;font:inherit;font-size:20px;padding:14px 16px;background:var(--navy);color:var(--on-navy);border:1px solid rgba(242,239,230,.35);border-radius:2px}
.sitesearch input:focus{outline:none;border-color:var(--gold)}
.ss-close{font:inherit;font-size:28px;line-height:1;width:48px;height:48px;background:transparent;color:var(--on-navy);border:1px solid rgba(242,239,230,.35);cursor:pointer}
.ss-close:hover{border-color:var(--gold);color:var(--gold)}
.ss-status{color:rgba(242,239,230,.7);margin:10px 0 0}
.ss-results{list-style:none;margin:18px 0 0;padding:0;max-width:820px}
.ss-results li{border-top:1px solid rgba(242,239,230,.14)}
.ss-results a{display:block;padding:14px 0;text-decoration:none;color:var(--on-navy)}
.ss-results a:hover .ss-page,.ss-results a:focus-visible .ss-page{color:var(--gold)}
.ss-page{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,239,230,.75);margin-bottom:4px}
.ss-text{display:block;font-size:16px;line-height:1.5}
.ss-text mark{background:rgba(242,180,49,.35);color:inherit;padding:0 2px}

/* accessibility: skip link and heading-as-label */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--navy-ink);padding:10px 14px;font-weight:600;text-decoration:none;border-radius:2px}
.skip:focus{top:12px;outline:2px solid var(--navy-ink)}
main:focus{outline:none}
h2.label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-70);margin:0 0 10px}

/* claim labels: source text, established holding, network position, audit finding */
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;border-radius:2px;margin-left:8px;vertical-align:middle;line-height:1.5;font-weight:500}
.tag.src{color:#2F5D8A}.tag.hold{color:#6B3F1E}.tag.interp{color:#14213D}.tag.find{color:#3E6B3A}
.hero .tag,.books .tag,.anniv .tag{color:var(--gold);border-color:var(--gold)}
ul.taglegend{list-style:none;padding:0;margin:10px 0 22px;display:grid;gap:7px;font-size:13.5px;color:var(--ink-70)}
ul.taglegend li{display:flex;align-items:baseline;gap:10px}
ul.taglegend .tag{margin:0;flex:0 0 auto;min-width:150px;text-align:center}
ul.taglegend li.small{display:block;padding-left:160px}
.lines.keyed .k .tag{margin:0}

/* outline buttons: navy on light sections, bone on navy sections */
main > section .btn.ghost{color:var(--navy);border-color:var(--navy)}
main > section .btn.ghost:hover{background:var(--navy);color:var(--on-navy)}
main > section.books .btn.ghost,main > section.join .btn.ghost,main > section.anniv .btn.ghost{color:var(--on-navy);border-color:var(--gold)}
main > section.books .btn.ghost:hover,main > section.join .btn.ghost:hover,main > section.anniv .btn.ghost:hover{background:rgba(242,180,49,.12);color:var(--on-navy)}