@import url('/exhibit/tokens.css');
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:1.125rem/1.55 'Source Sans 3',sans-serif}a{color:var(--ink);text-underline-offset:.2em}button,input,select,textarea{font:inherit}button,.button{min-height:44px;padding:.45rem .8rem;border:1px solid var(--ink);border-radius:3px;background:white;color:var(--ink);cursor:pointer;text-decoration:none}button:hover,button[aria-pressed=true],.button:hover{background:var(--ink);color:white}button:disabled{opacity:.6;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #086cb1;outline-offset:4px}.shell{max-width:1440px;margin:auto;padding:0 3vw}.site-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid #b7b8b4;padding:1.2rem 0}.site-name{font-family:Newsreader,Georgia,serif;font-size:1.5rem;text-decoration:none}.site-bar nav{display:flex;gap:1.25rem;flex-wrap:wrap}.site-bar nav a{min-height:44px;display:flex;align-items:center}h1,h2,h3{font-family:Newsreader,Georgia,serif;font-weight:400;line-height:1.12}h1{font-size:clamp(2.2rem,4vw,3.8rem);margin:.7rem 0}h2{font-size:1.8rem;margin:.4rem 0 1rem}h3{font-size:1.5rem}.intro{max-width:65ch;margin:0 0 1.5rem}.eyebrow{font-size:.9rem;letter-spacing:.07em;text-transform:uppercase;margin:.6rem 0}.source{margin:1.2rem 0 2rem;min-width:0}.source-columns{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem}.toolbar,.lenses,.actions,.steps{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}.image-viewport{max-height:68vh;overflow:auto;background:#e4e5e1;padding:1rem;border:1px solid #c4c6c1}.image-plane{position:relative;width:100%;transform-origin:top left}.image-plane img{width:100%;height:auto;display:block}.source-region{position:absolute;border:3px solid var(--rust);background:#cc643420;pointer-events:none}.review-line,.caption{font-size:.9rem;overflow-wrap:anywhere}.review-line{border-left:3px solid var(--rust);padding-left:.6rem}.transcript{white-space:pre-wrap;margin:0 0 1rem;font-family:Newsreader,Georgia,serif;font-size:1.3rem;line-height:1.6}mark{background:#f3d69e;color:#162b31}details{border-top:1px solid #c4c6c1;margin-top:1rem;padding:.7rem 0}summary{cursor:pointer;min-height:44px}details p{overflow-wrap:anywhere}textarea{width:100%;min-height:90px}.source-reading{min-width:0}.chapter-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0}.chapter-cards>a,.catalog-card{border-top:2px solid var(--ink);padding:1rem;text-decoration:none}.chapter-cards p{margin:.5rem 0}.series{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;padding:0;list-style:none}.series a{display:block;padding:.6rem;border:1px solid #bbc0bc}.site-footer{margin-top:3rem;padding:1.5rem 0;border-top:1px solid #a3aaa8;font-size:1rem}dialog{width:min(1380px,96vw);max-height:94vh;overflow:auto;border:1px solid var(--ink);padding:1.5rem;background:var(--paper)}dialog::backdrop{background:#102529bb}dialog>[data-close]{position:sticky;top:0;z-index:3;float:right}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;clear:both}.comparison .source-columns{display:block}.comparison .image-viewport{max-height:45vh}.comparison .source-reading{margin-top:1rem}#notice{position:fixed;bottom:1rem;left:1rem;background:var(--ink);color:white;padding:.5rem 1rem;z-index:10}#notice:empty{display:none}#source-tray:not(:empty){border:2px solid var(--ink);padding:1rem;margin-top:2rem}#source-tray ul{padding-left:1.2rem}#source-tray li{margin:.5rem 0}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;padding:1rem;z-index:99}[hidden]{display:none!important}.relationship{border-left:4px solid var(--rust);padding:1rem}.text-only{border:1px solid #b3bbb7;padding:2rem}.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.catalog-card h2{font-size:1.5rem}.prose{max-width:75ch}.subtitle{font-family:Newsreader,Georgia,serif;font-size:1.4rem;margin:.3rem 0}.steps a{display:block;padding:.6rem;border:1px solid #a1aaa5}.steps a[aria-current]{background:var(--ink);color:white}input{max-width:100%;min-height:44px}body:has(dialog[open]){overflow:hidden}@media(max-width:700px){.site-bar{align-items:flex-start;flex-direction:column}.site-bar nav{gap:.75rem}.source-columns,.comparison,.chapter-cards,.catalog{grid-template-columns:1fr}.shell{padding:0 1rem}.image-viewport{max-height:60vh;padding:.5rem}dialog{padding:.75rem}.source-reading{margin-top:1rem}h1{font-size:2.3rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep the first source and its passage controls in the opening viewport. */
#main>h1{margin:.4rem 0;font-size:clamp(2rem,3.4vw,3rem)}#main>.intro{margin-bottom:.75rem}#main>.subtitle{margin-bottom:.4rem}#main>.source>header{margin:0}.lenses{position:relative}.source header h2{font-size:1.5rem}.source{margin-top:.5rem}.source-reading .lenses{margin-top:.4rem}
/* Prepared guides: a question, an answer, and the words it rests on. */
.guide-answer{border-left:3px solid #b7b8b4;padding-left:.9rem;margin:1.2rem 0}
.guide-answer h3{font-size:1.2rem;margin:.1rem 0 .4rem}
.guide-cites{list-style:none;padding:0;margin:.6rem 0 0}
.guide-cites li{margin:.5rem 0}
.guide-cites button{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid #c9cac4;padding:.15rem 0 .15rem .7rem;cursor:pointer}
.guide-cites button:hover{border-left-color:var(--rust)}
.guide-cites q{font-family:Newsreader,Georgia,serif;font-size:1.1rem}
.guide-source{margin:1.1rem 0 0;font-size:.9rem}
.fingerprint{margin:.9rem 0 0;font-size:.85rem}
.fingerprint div{display:flex;gap:.5rem;align-items:baseline;margin:.15rem 0}
.fingerprint dt{min-width:7rem;color:#5d6b67}
.fingerprint dd{margin:0}
.fingerprint span{color:#5d6b67}
/* The two type settings of the Greenwood advertisement, and the printings under
   each. The comparison is a table because it is one: three lines, two states. */
.scroller{overflow-x:auto;margin:1rem 0}
.settings-table{border-collapse:collapse;min-width:36rem;font-size:1rem}
.settings-table caption{text-align:left;font-size:.9rem;padding-bottom:.5rem}
.settings-table th,.settings-table td{border:1px solid #bbc0bc;padding:.55rem .7rem;text-align:left;vertical-align:top}
.settings-table thead th{background:#e6e7e3;font-weight:600;white-space:nowrap}
.settings-table td{font-family:Newsreader,Georgia,serif;font-size:1.1rem}
.setting{margin:1.5rem 0}.setting h3{margin-bottom:.15rem}.setting>.caption{margin:0 0 .75rem}
.series a span{display:block;font-size:.85rem}
#evidence .source-columns{display:block}#evidence .image-viewport{max-height:45vh}#evidence .source-reading{margin-top:1rem}.bar,.site-header{display:none}.atlas,.index{max-width:100%;margin-inline:auto}.site-bar{position:relative;background:var(--paper)}.ground{display:none!important}.map-wrap{max-height:65vh}.foot{display:none}

/* The case, act by act. The last two acts take the rust border because that is
   where the case turns against her: the state court reverses, the federal court
   affirms the reversal. A visitor should be able to see the shape before
   reading a word of it. */
.arc{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:2rem 0;padding:0}
.arc a{display:block;height:100%;padding:.7rem .75rem .85rem;text-decoration:none;border-top:3px solid var(--ink);background:white}
.arc a:hover,.arc a:focus-visible{background:var(--ink);color:var(--paper)}
.arc li:nth-child(n+4) a{border-top-color:var(--rust)}
.arc-date{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.arc-label{display:block;font-family:Newsreader,Georgia,serif;font-size:1.3rem;margin:.1rem 0 .2rem}
.arc-note{display:block;font-size:.9rem;line-height:1.35}
@media(max-width:700px){.arc{grid-template-columns:1fr;gap:0}.arc a{border-top-width:2px}}

/* The opening map. Two marks, one difference: a filled dot is a town a document
   puts someone in, a hollow one is a town that only printed about them. */
.map-figure{margin:1.5rem 0 2.5rem;max-width:54rem;display:grid;grid-template-columns:minmax(0,30rem) 1fr;gap:2.5rem;align-items:center}
.map-figure svg{width:100%;height:auto;display:block}
.map-figure .state{fill:#f0efe9;stroke:#c9cac4;stroke-width:1}
.map-figure .town circle{fill:none;stroke:#7d8a86;stroke-width:1.5}
.map-figure .town.is-delta circle{fill:var(--rust);stroke:var(--rust)}
.map-figure .town.is-elsewhere circle{fill:#c9a99b;stroke:#b08670;stroke-width:1.5}
.map-figure .town text{font-size:15px;fill:#5d6b67;paint-order:stroke;stroke:var(--paper);stroke-width:3.5px}
.map-figure .town.is-delta text{font-size:17px;fill:var(--ink);font-weight:600}
.map-figure .town.is-elsewhere text{fill:#4a5754}
.map-figure .town:hover circle,.map-figure .town:focus-visible circle{fill:var(--ink);stroke:var(--ink)}
.map-figure .town:hover text,.map-figure .town:focus-visible text{font-weight:600}
.map-figure figcaption{font-size:1rem;line-height:1.5;max-width:22rem}
.map-figure figcaption .key{display:block;margin-top:.9rem}
.key{font-weight:600}
.key::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.35rem;vertical-align:baseline}
.key-delta::before{background:var(--rust)}
.key-elsewhere::before{background:#c9a99b;border:1.5px solid #b08670}
.key-printed::before{border:1.75px solid var(--ink)}
/* At phone width seventeen names cannot fit round a state this narrow — Greenwood
   ran into Columbus, Lexington into Macon. Only the five Delta towns keep their
   labels; the rest stay as dots, and the caption and the SVG description still
   name every one of them. */
@media(max-width:700px){.map-figure{grid-template-columns:1fr;gap:.8rem}.map-figure figcaption{max-width:none}.map-figure .town.is-delta text{font-size:21px}.map-figure .town.is-elsewhere text,.map-figure .town.is-printed text{display:none}}

/* The 1903 spread. Dots and dates, deliberately no arrows: which paper took the
   item from which is not recorded, and an arrow would claim it was. */
.spread-figure{margin:1.5rem 0 2rem;max-width:56rem;display:grid;grid-template-columns:minmax(0,30rem) 1fr;gap:2.5rem;align-items:center}
.spread-figure svg{width:100%;height:auto;display:block}
.spread-figure .state{fill:#f0efe9;stroke:#c9cac4;stroke-width:1}
.spread-figure .print circle{fill:var(--rust);stroke:var(--rust)}
.spread-figure .subject circle{fill:none;stroke:var(--ink);stroke-width:2.5}
.spread-figure text{paint-order:stroke;stroke:var(--paper);stroke-width:3.5px}
.spread-figure .t-town{font-size:16px;fill:var(--ink)}
.spread-figure .t-date{font-size:14px;fill:var(--rust);font-weight:600}
.spread-figure .subject .t-note{font-size:14px;fill:var(--ink);font-style:italic}
.spread-figure .print:hover circle,.spread-figure .print:focus-visible circle{fill:var(--ink);stroke:var(--ink)}
.spread-figure figcaption{font-size:1rem;line-height:1.5;max-width:24rem}
/* One sentence, printed eight times, quoted once. */
.pull{border-left:4px solid var(--rust);padding:.2rem 0 .2rem 1.2rem;margin:1.5rem 0;max-width:40rem}
.pull blockquote{font-family:Newsreader,Georgia,serif;font-size:1.45rem;line-height:1.45;margin:0}
.pull .attrib{font-size:.95rem;margin:.6rem 0 0}
@media(max-width:700px){.spread-figure{grid-template-columns:1fr;gap:.8rem}.spread-figure figcaption{max-width:none}.pull blockquote{font-size:1.25rem}}

/* Forty-three printings, placed by date. The gap in the middle is the evidence,
   so the marks are spaced by time and never distributed evenly. */
.series-figure{margin:1.25rem 0 2rem;max-width:46rem}
.series-figure svg{width:100%;height:auto;display:block;overflow:visible}
.series-figure .s-rule{stroke:#c9cac4;stroke-width:1}
.series-figure .tick rect{fill:var(--rust)}
.series-figure .tick.is-B rect{fill:var(--ink)}
.series-figure .tick:hover rect,.series-figure .tick:focus-visible rect{fill:#086cb1}
.series-figure .s-change{stroke:#8d9691;stroke-width:1;stroke-dasharray:3 3}
.series-figure .s-change-label{font-size:12px;fill:#5d6b67;letter-spacing:.04em;text-transform:uppercase}
.series-figure .s-year{font-size:13px;fill:#5d6b67}
.series-figure figcaption{font-size:1rem;line-height:1.5;margin-top:.7rem;max-width:44rem}

/* The years the scan surfaced nothing for. The band is the exhibit's span; the
   cut-out is what is missing from it. */
.gap-figure{margin:1.25rem 0 1.5rem;max-width:46rem}
.gap-figure svg{width:100%;height:auto;display:block;overflow:visible}
.gap-figure .span{fill:#e4e5e1}
.gap-figure .gap{fill:var(--rust);opacity:.22}
.gap-figure .act line{stroke:var(--ink);stroke-width:1.5}
.gap-figure .act circle{fill:var(--ink)}
.gap-figure .act.in-gap line{stroke:var(--rust)}
.gap-figure .act.in-gap circle{fill:var(--rust)}
.gap-figure .c-year{font-size:13px;fill:#5d6b67}
.gap-figure .gap-label{font-size:13px;fill:var(--rust);font-weight:600}
.gap-figure figcaption{font-size:1rem;line-height:1.5;margin-top:.6rem;max-width:44rem}

/* What the collection is, by topic and year. */
.records-figure{margin:1.25rem 0 2rem;max-width:46rem}
.records-figure svg{width:100%;height:auto;display:block;overflow:visible}
.records-figure .rt-rule{stroke:#d7d8d3;stroke-width:1}
.records-figure .rt-lane{font-size:14px;fill:var(--ink)}
.records-figure .rt-n{font-size:13px;fill:#5d6b67}
.records-figure .rt-year{font-size:13px;fill:#5d6b67}
.records-figure .rt-dot circle{fill:var(--rust)}
.records-figure .rt-dot:hover circle,.records-figure .rt-dot:focus-visible circle{fill:var(--ink)}
.records-figure figcaption{font-size:1rem;line-height:1.5;margin-top:.6rem;max-width:44rem}

/* The case page's four legal acts use the same timeline as the opening, so the
   case looks like one thing wherever it appears. The current act is filled; the
   last two take rust because that is where the case turns against her. */
.arc-steps{grid-template-columns:repeat(4,minmax(0,1fr));margin:1.25rem 0 1rem}
.arc-steps li:nth-child(n+4) a{border-top-color:var(--ink)}
.arc-steps li:nth-child(n+3) a{border-top-color:var(--rust)}
.arc a[aria-current=step]{background:var(--ink);color:var(--paper)}
@media(max-width:700px){.arc-steps{grid-template-columns:1fr 1fr;gap:.4rem}}

/* A scan at the size of the screen. The page image fills the width and scrolls;
   a small advertisement crop is allowed to grow, but not past 900px, where the
   halftone starts to break up. */
#image-dialog{width:96vw;max-width:none;height:94vh;max-height:none;padding:0;border:1px solid var(--ink);background:#e4e5e1;display:none}
#image-dialog[open]{display:flex;flex-direction:column}
#image-dialog::backdrop{background:#102529dd}
.image-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 1rem;background:var(--paper);border-bottom:1px solid #c4c6c1}
.image-dialog-bar p{margin:0;font-size:.95rem}
.image-dialog-scroll{flex:1;overflow:auto;padding:1rem}
.image-dialog-scroll img{display:block;margin:0 auto;width:auto;max-width:100%;min-width:min(100%,900px);height:auto}

.image-dialog-tools{display:flex;gap:.4rem}

/* Layout pass: the case button no longer sits on the next heading. The map's
   two columns apply only on wide screens — declared unconditionally, this rule
   came after the phone rule and squeezed the map to a thumbnail beside its
   caption. The strips are SVGs with fixed text sizes in their viewBox, so past
   about 56rem they scale their labels up with them; they stop there. */
.follow-one{margin-top:3.5rem}
.actions+.follow-one,.actions+h2{margin-top:3.5rem}
@media(min-width:701px){.map-figure{grid-template-columns:minmax(0,30rem) minmax(0,24rem);justify-content:start}}
.series-figure,.gap-figure{max-width:56rem}

/* The ending: one photograph, one short paragraph, the way out. The image keeps
   its own proportions and the credit sits with it, where it belongs. */
.ending{margin-top:1rem}
.ending-grid{display:grid;grid-template-columns:minmax(0,38rem) minmax(0,26rem);gap:2.5rem;align-items:start}
.photo{margin:0}
.photo img{width:100%;height:auto;display:block;border:1px solid #c4c6c1}
.photo figcaption{font-size:.95rem;line-height:1.5;margin-top:.6rem}
.photo .credit{display:block;margin-top:.4rem;color:#5d6b67}
.ending-text p{margin:0 0 1rem}
.ending-text .also{font-size:.95rem;color:#5d6b67}
@media(max-width:700px){.ending-grid{grid-template-columns:1fr;gap:1rem}}

.era-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:2rem 0 3rem}
.era-path a{display:flex;min-height:8rem;flex-direction:column;justify-content:space-between;padding:1rem;background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--rust);text-decoration:none}
.era-path span{color:var(--rust-dark);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.era-path strong{font-family:Newsreader,Georgia,serif;font-size:1.25rem;font-weight:500;line-height:1.15}
.era-path a:hover,.era-path a:focus-visible{background:var(--ink);color:var(--paper)}
.century-opening{margin-bottom:4.5rem}
.century-opening>h2{margin-bottom:1.25rem}
.home-links{margin-top:4rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.transcript-object{min-height:22rem;padding:clamp(1.2rem,3vw,2rem);background:#ece8dd;border:1px solid var(--rule);border-top:5px solid var(--ink);display:flex;flex-direction:column;justify-content:center}
.transcript-object blockquote{margin:.5rem 0 1.2rem;font-family:Newsreader,Georgia,serif;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.45}
.transcript-object>p:last-child{color:var(--ink-soft);font-size:.92rem}
@media(max-width:850px){.era-path{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.era-path{grid-template-columns:1fr}.era-path a{min-height:6rem}}

/* Controls that only work with JavaScript stay hidden until it runs. */
.toolbar,.lenses{display:none}
.js .toolbar,.js .lenses{display:flex}

/* Refinement pass: a compact archival reading room rather than a loose stack
   of generated panels. The source hierarchy and evidence stay unchanged. */
html{scroll-padding-top:6rem}
body{background:var(--paper);color:var(--ink);font-size:1.0625rem;line-height:1.62;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:4px;background:var(--rust);z-index:40}
.shell{max-width:1240px;padding:0 clamp(1rem,4vw,3.5rem)}
.site-bar{position:sticky;top:0;z-index:20;padding:1rem 0 .85rem;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);border-bottom-color:var(--rule)}
.site-name{font-size:1.42rem;font-weight:500;letter-spacing:-.01em}
.site-bar nav{gap:clamp(.7rem,2vw,1.35rem)}
.site-bar nav a{position:relative;color:var(--ink-soft);font-size:.98rem;font-weight:600;text-decoration:none}
.site-bar nav a:hover{color:var(--rust)}
.site-bar nav a[aria-current=page]{color:var(--ink)}
.site-bar nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:var(--rust)}
#main{padding-top:clamp(1.4rem,4vw,3.1rem)}
#main>h1{max-width:22ch;margin:.35rem 0 .85rem;font-size:clamp(2.65rem,5.4vw,4.55rem);letter-spacing:-.025em}
#main>h1{text-wrap:balance}
#main>.eyebrow:first-child{margin-top:1rem}
h2{font-size:clamp(1.85rem,3vw,2.4rem);letter-spacing:-.015em}
h3{letter-spacing:-.01em}
.eyebrow{margin:.2rem 0 .55rem;color:var(--rust-dark);font-size:.79rem;font-weight:600;letter-spacing:.115em}
.intro{max-width:62ch;margin-bottom:1.35rem;color:var(--ink-soft);font-size:1.17rem;line-height:1.55}
button,.button{border-color:var(--ink);border-radius:2px;background:var(--surface);font-weight:600;transition:background-color .16s ease,color .16s ease,border-color .16s ease}
button:hover,.button:hover{border-color:var(--ink)}
.map-figure{max-width:none;margin:2rem 0 4.5rem;padding:clamp(1rem,3vw,2.2rem);grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,6vw,4.5rem);background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--rust);align-items:center}
.map-figure figcaption{max-width:32rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.62}
.map-figure figcaption .key{margin-top:1.05rem;color:var(--ink)}
.follow-one{margin-top:4.8rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.actions+.follow-one,.actions+h2{margin-top:4.8rem}
.opening-question{max-width:65ch;margin:1.5rem 0;padding:1rem 1.1rem;background:var(--surface-muted);border-left:4px solid var(--rust)}
.arc{gap:.75rem;margin:1.6rem 0 2rem}
.arc a{padding:1rem;background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--ink);box-shadow:0 1px 0 #142e3610}
.arc li:nth-child(n+4) a{border-top-color:var(--rust)}
.arc a:hover,.arc a:focus-visible{border-color:var(--ink);background:var(--ink)}
.arc-date{font-size:.75rem;font-weight:600}
.arc-label{font-size:1.38rem}
.source{margin:1.5rem 0 2rem;padding:clamp(1rem,2.5vw,1.7rem);background:var(--surface);border:1px solid var(--rule);box-shadow:0 1px 0 #142e360d}
.source>header{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule)}
.source header h2{margin-bottom:0;font-size:clamp(1.5rem,2.6vw,2rem)}
.source-columns{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3rem)}
.toolbar,.lenses,.actions,.steps{gap:.6rem}
.toolbar button,.lenses button{background:var(--paper);font-size:.95rem}
.image-viewport{padding:.75rem;background:#e8e9e4;border-color:var(--rule-dark)}
.source .caption,.source .review-line{color:var(--ink-soft)}
.source .transcript{padding-left:1rem;border-left:3px solid var(--rust);font-size:1.25rem;line-height:1.62}
.source .interpretation{color:var(--ink-soft)}
details{border-top-color:var(--rule)}
summary{font-weight:600}
.fingerprint dd{min-width:0;overflow-wrap:anywhere}
.fingerprint code{word-break:break-all}
.series-figure,.gap-figure,.records-figure{padding:1.15rem;background:var(--surface);border:1px solid var(--rule)}
.series-figure figcaption,.gap-figure figcaption,.records-figure figcaption{color:var(--ink-soft)}
.chapter-cards>a,.catalog-card{padding:1.15rem;background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink)}
.catalog{gap:1.25rem}
#catalog-search{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin:1.75rem 0;padding:1rem;background:var(--surface-muted);border:1px solid var(--rule)}
#catalog-search label{display:grid;gap:.3rem;font-size:.92rem;font-weight:600}
#catalog-search input,#catalog-search select{padding:.45rem .55rem;background:var(--surface);border:1px solid var(--rule-dark)}
.ending{margin-top:1rem;padding:clamp(1rem,3vw,2.2rem);background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--ink)}
.ending .follow-one{margin-top:0;padding-top:0;border-top:0}
.ending-grid{gap:clamp(1.5rem,4vw,3rem)}
.photo figcaption,.ending-text .also{color:var(--ink-soft)}
.century-opening{overflow:hidden;padding:0;border-top:5px solid var(--ink);box-shadow:0 12px 35px #142e360d}
.century-opening>h2{margin:0;padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,3vw,2.4rem) 1rem}
.century-opening .ending-grid{gap:0;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.8fr)}
.century-opening .photo img{min-height:100%;object-fit:cover;border:0;border-top:1px solid var(--rule)}
.century-opening .photo figcaption{padding:.75rem 1rem 1rem;background:var(--surface-muted);margin:0}
.century-opening .ending-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.4rem,3vw,2.5rem);border-left:1px solid var(--rule)}
.century-opening .ending-text p:first-child{font:400 clamp(1.25rem,2vw,1.6rem)/1.45 Newsreader,Georgia,serif;color:var(--ink)}
.century-opening .button:first-child{background:var(--rust);border-color:var(--rust);color:#fff}
.era-path{counter-reset:era}
.era-path a{position:relative;overflow:hidden;isolation:isolate;transition:transform .16s ease,background-color .16s ease,color .16s ease}
.era-path a::after{counter-increment:era;content:"0" counter(era);position:absolute;right:.55rem;bottom:-.45rem;z-index:-1;color:var(--surface-muted);font:500 4.5rem/1 Newsreader,Georgia,serif}
.era-path a:hover,.era-path a:focus-visible{transform:translateY(-3px)}
.era-path a:hover::after,.era-path a:focus-visible::after{color:#ffffff18}
#beginnings,#school-case{scroll-margin-top:6rem}
#beginnings>h2,#school-case>h2{max-width:22ch}
.site-footer{display:grid;grid-template-columns:1fr minmax(18rem,.75fr);gap:2rem;margin-top:4.5rem;padding:1.6rem 0 2.2rem;border-top-color:var(--rule);color:var(--ink-soft);font-size:.94rem}
.site-footer p{margin:0}

@media(max-width:700px){
 html{scroll-padding-top:1rem}
 .shell{padding:0 1rem}
 .site-bar{position:relative;align-items:flex-start;padding:1rem 0 .65rem}
 .site-name{font-size:1.3rem}
 .site-bar nav{width:100%;flex-wrap:nowrap;gap:1rem;overflow-x:auto;padding:.15rem 0 .25rem;scrollbar-width:none}
 .site-bar nav::-webkit-scrollbar{display:none}
 .site-bar nav a{flex:0 0 auto;min-height:38px;font-size:.93rem}
 #main{padding-top:1.25rem}
 #main>h1{font-size:clamp(2.45rem,12vw,3.2rem)}
 .intro{font-size:1.08rem}
 .map-figure{grid-template-columns:1fr;gap:1rem;margin:1.5rem 0 3.4rem;padding:.5rem}
 .map-figure figcaption{max-width:none}
 .follow-one,.actions+.follow-one,.actions+h2{margin-top:3.6rem}
 .arc{grid-template-columns:1fr;gap:.55rem}
 .source{padding:.85rem}
 .source-columns,.comparison,.chapter-cards,.catalog{grid-template-columns:1fr}
 .source .transcript{font-size:1.14rem}
 .series-figure,.gap-figure,.records-figure{padding:.7rem}
 #catalog-search{align-items:stretch}
 #catalog-search label,#catalog-search input,#catalog-search select,#catalog-search button{width:100%}
 .ending{padding:1rem}
 .ending-grid{grid-template-columns:1fr;gap:1rem}
 .century-opening .ending-grid{grid-template-columns:1fr;gap:0}
 .century-opening .ending-text{border-left:0;border-top:1px solid var(--rule)}
 .site-footer{grid-template-columns:1fr;gap:.8rem;margin-top:3rem}
}