:root{
  --paper:#ffffff;
  --surface:#faf9f6;      /* cards, panel fills */
  --surface-2:#f2efe8;    /* image stages, thumbnails */
  --field:#f8f6f1;        /* the map field the newsprint fills */
  --ink:#16140f;          /* primary text */
  --ink-2:#413c34;        /* secondary text */
  --muted:#6f695e;        /* captions, review lines */
  --line:#e3dfd5;         /* hairlines */
  --line-2:#cfc9bb;       /* hairlines that must be seen */

  /* The two things a mark can mean. Validated as a categorical pair on a light
     surface: CVD ΔE 17.8, normal-vision ΔE 24.4, both ≥3:1 against the page.
     Shape carries the same distinction, so identity is never colour alone. */
  --doc:#b3541e;
  --doc-soft:rgba(179,84,30,.12);
  --print:#1e6f9c;
  --print-soft:rgba(30,111,156,.12);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --tap:44px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--doc);text-decoration-color:var(--doc)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--doc);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:50}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
/* The one place the exhibit says what a check was worth. Never decorative,
   never hidden behind a disclosure. */
.review-line{color:var(--muted)}

/* Header */
.bar{display:flex;flex-wrap:wrap;gap:10px 32px;align-items:baseline;justify-content:space-between;padding:20px clamp(16px,5vw,56px);border-bottom:1px solid var(--line);background:var(--paper)}
.brand{font:500 18px/1 var(--serif);text-decoration:none}
.brand span{color:var(--muted)}
.bar nav{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14.5px}
.bar nav a{text-decoration:none;color:var(--ink-2)}
.bar nav a:hover{color:var(--doc)}
.bar nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--doc)}

/* Atlas: one centred column with the map as its subject */
.atlas{max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(16px,5vw,56px) clamp(32px,5vw,56px)}
.lede{max-width:65ch;margin:0}
h1{font:300 clamp(36px,5vw,56px)/1.05 var(--serif);letter-spacing:-.015em;margin:0 0 16px}
.dek{font:400 clamp(16.5px,1.4vw,18.5px)/1.6 var(--serif);color:var(--ink-2);margin:0 0 22px}
.dek em{font-style:italic;color:var(--ink)}
.starts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.start{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 20px;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);cursor:pointer;font:400 15px/1 var(--sans);text-decoration:none;color:var(--ink)}
.start:hover{border-color:var(--doc);color:var(--doc)}
.start.primary{background:var(--doc);border-color:var(--doc);color:var(--paper);font-weight:600}
.start.primary:hover{background:#9c4718;border-color:#9c4718;color:var(--paper)}
.start.quiet{color:var(--muted)}

/* The visualization */
.map-figure{margin:clamp(20px,3vw,34px) 0 0}
.map-wrap{position:relative;height:min(62vh,560px);background:var(--paper)}
#map{position:absolute;inset:0;width:100%;height:100%}
.marks{position:absolute;inset:0}
.map-loading{position:absolute;left:0;right:0;top:50%;text-align:center;font-size:14px;color:var(--muted);margin:0}
.mark{position:absolute;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap);padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity 1.2s ease}
.marks.lit .mark{opacity:1}
.mark::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;border-radius:50%;background:var(--doc);transition:transform .2s ease}
.mark.print::before{background:var(--paper);border:1.5px solid var(--print);width:10px;height:10px;margin:-5px}
.mark.both::after{content:"";position:absolute;left:50%;top:50%;width:19px;height:19px;margin:-9.5px;border-radius:50%;border:1.5px solid var(--print)}
.mark:hover::before,.mark:focus-visible::before,.mark[aria-pressed="true"]::before{transform:scale(1.45)}
.mark[aria-pressed="true"]::before{box-shadow:0 0 0 6px var(--doc-soft)}
.mark.print[aria-pressed="true"]::before{box-shadow:0 0 0 6px var(--print-soft)}
.mark-label{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font:400 15px/1 var(--serif);color:var(--ink);pointer-events:none;text-shadow:0 0 4px var(--paper),0 0 8px var(--paper),0 0 12px var(--paper)}
.mark-label.right{left:24px}.mark-label.left{right:24px}
.mark.print .mark-label{font:400 13px/1 var(--sans);color:var(--print);opacity:0;transition:opacity .18s}
.mark.print .mark-label.always{opacity:.9}
.mark.print:hover .mark-label,.mark.print:focus-visible .mark-label,.mark.print[aria-pressed="true"] .mark-label{opacity:1}
.mark[aria-pressed="true"] .mark-label{color:var(--doc)}
.mark.print[aria-pressed="true"] .mark-label{color:var(--print)}
/* Hover and focus say what the mark holds, without a click. */
.map-tip{position:absolute;z-index:4;transform:translate(-50%,-100%);pointer-events:none;background:var(--ink);color:var(--paper);border-radius:4px;padding:7px 11px;font:400 13px/1.35 var(--sans);white-space:nowrap;box-shadow:0 6px 20px rgba(20,18,14,.22)}
.map-tip b{font-weight:600}
.map-tip span{display:block;color:#cfcabe;font-size:12px}

/* Fragments of real OCR, clipped to the state outline: the texture of the
   thing itself, never noise loose on the page. */
.ground{position:absolute;left:0;top:0;overflow:hidden;pointer-events:none;color:var(--ink);opacity:.12;
  font:400 10.5px/1.5 var(--serif);text-align:justify;hyphens:auto;padding:2px 3px}
.ground span{white-space:normal}

.map-key{margin:22px auto 0;max-width:780px;text-align:left}
.legend{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.legend li{display:flex;gap:12px;align-items:flex-start}
.legend b{font-weight:600;color:var(--ink)}
.mk-doc,.mk-print,.mk-both{position:relative;display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;margin-top:5px}
.mk-doc{background:var(--doc)}
.mk-print{background:var(--paper);border:1.5px solid var(--print)}
.mk-both{background:var(--doc)}
.mk-both::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;border:1.5px solid var(--print)}
.selection{font-size:13.5px;color:var(--muted);margin:0;padding-top:12px;border-top:1px solid var(--line)}

/* Index (also the no-JS listing) */
.index{max-width:1080px;margin:0 auto;padding:8px clamp(16px,5vw,56px) 72px}
.index>h2{font:400 28px/1.2 var(--serif);margin:0 0 8px}
.index-note{color:var(--muted);font-size:14px;max-width:70ch;margin:0 0 28px}
.index-list{columns:3 280px;column-gap:44px}
.index-place{break-inside:avoid;margin:0 0 30px}
.index-place h3{font:500 20px/1.2 var(--serif);margin:0 0 8px}
.index-place h3 a{text-decoration:none;border-bottom:1px solid var(--line-2)}
.index-place h3 small{font:400 13px var(--sans);color:var(--muted)}
.index-place ul{list-style:none;margin:0;padding:0}
.index-place li a{display:grid;padding:9px 0;border-top:1px solid var(--line);text-decoration:none}
.i-date{font-size:12px;color:var(--muted)}
.i-title{font:400 16px/1.35 var(--serif)}
.i-rel{font-size:13px;color:var(--ink-2)}

/* Place panel */
.panel{position:fixed;z-index:20;top:0;right:0;bottom:0;width:min(460px,100%);overflow:auto;background:var(--paper);border-left:1px solid var(--line);padding:28px 26px 48px;box-shadow:-24px 0 60px rgba(20,18,14,.10);animation:slide .4s cubic-bezier(.2,.7,.2,1)}
@keyframes slide{from{transform:translateX(32px);opacity:0}}
.panel h2{font:300 clamp(32px,5vw,42px)/1.05 var(--serif);margin:0 0 6px;padding-right:92px}
.panel .eyebrow{padding-right:92px}
/* The panel is focused programmatically so a screen reader lands in it; it is
   a region, not a control, so it does not draw a focus ring of its own. */
.panel:focus,.panel:focus-visible{outline:none}
.panel-sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.panel-rule{border-left:2px solid var(--doc);padding-left:12px;margin-bottom:20px;color:var(--ink-2)}
.panel-close{position:absolute;top:16px;right:18px;display:inline-flex;align-items:center;min-height:36px;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:0 16px;cursor:pointer;font-size:14px}
.panel-close:hover{border-color:var(--doc);color:var(--doc)}
.panel h3{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:28px 0 10px}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px;cursor:pointer}
.card:hover{border-color:var(--doc);background:var(--paper)}
.c-body{min-width:0}
.thumb{height:88px;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center;border-radius:2px}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.thumb-type{font:400 11px/1.35 var(--serif);color:var(--ink-2);padding:8px;text-align:left;height:100%;overflow:hidden}
.c-date{display:block;font-size:12px;color:var(--muted)}
.c-title{display:block;font:400 17px/1.3 var(--serif);margin:2px 0 6px}
.c-rel{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--ink-2)}
.c-rel i{width:9px;height:9px;margin-top:0;transform:translateY(1px)}
.c-review{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--muted)}

/* Reader */
.reader{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);display:none;flex-direction:column}
.reader[open]{display:flex}
.reader::backdrop{background:rgba(20,18,14,.45)}
/* Focused on open so a screen reader lands in it; the ring belongs on controls. */
.reader:focus,.reader:focus-visible{outline:none}
/* The toolbar is a row, and Close has its own end of it. It used to be pinned
   over the corner of the stage, where at 390px it sat on top of Fit. */
.r-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px clamp(12px,2vw,18px);border-bottom:1px solid var(--line);background:var(--paper)}
.r-group{display:flex;gap:8px;align-items:center}
.r-zoom{margin-right:auto}
.r-bar button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:0 16px;cursor:pointer;font-size:15px}
.r-bar button:hover{border-color:var(--doc);color:var(--doc)}
.r-bar button[aria-pressed="true"]{border-color:var(--doc);background:var(--doc);color:var(--paper)}
.r-close{margin-left:auto}
.r-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);flex:1;min-height:0}
/* min-width:0 everywhere the full-size image layer sits: its intrinsic width
   would otherwise stretch the grid column far past the viewport. */
.r-stage-wrap{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface-2);border-right:1px solid var(--line)}
.r-stage{position:relative;flex:1;min-width:0;min-height:300px;overflow:hidden;cursor:grab;touch-action:none}
.r-stage.dragging{cursor:grabbing}
.r-layer{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.r-layer img{display:block;user-select:none;-webkit-user-drag:none}
.r-layer .r-crop{position:absolute;opacity:0;transition:opacity .7s}
.r-layer.focus .r-crop{opacity:1}
.r-frame{position:absolute;box-shadow:0 0 0 30000px rgba(255,255,255,0);outline:1px solid rgba(179,84,30,0);transition:box-shadow .8s,outline-color .8s;pointer-events:none}
.r-layer.focus .r-frame{box-shadow:0 0 0 30000px rgba(250,249,246,.82);outline-color:var(--doc)}
.r-cap{margin:0;padding:12px 18px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);background:var(--paper)}
.r-typeset{margin:auto;max-width:560px;padding:40px 34px;background:var(--paper);border:1px solid var(--line);border-radius:4px;color:var(--ink);font:400 21px/1.55 var(--serif);box-shadow:0 12px 40px rgba(20,18,14,.07)}
.r-typeset .note{font:14px/1.5 var(--sans);color:var(--muted);margin-top:22px}
.r-noimage{font:400 17px/1.55 var(--serif)}
.r-noimage .head{margin:0 0 14px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.r-noimage .cite{margin:0;color:var(--ink)}
.r-stage.typeset{display:flex;cursor:default;overflow:auto;padding:24px}
.r-read{overflow:auto;padding:26px clamp(20px,3vw,48px) 72px}
.r-seq{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.r-seq-nav{display:flex;gap:8px}
.r-seq button{min-height:34px;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:0 13px;cursor:pointer;font-size:13px}
.r-seq button:hover:not(:disabled){border-color:var(--doc);color:var(--doc)}
.r-seq button:disabled{opacity:.4;cursor:default}
.r-read h2{font:400 clamp(26px,2.6vw,36px)/1.15 var(--serif);margin:0 0 6px}
.r-pub{color:var(--ink-2);margin:0 0 14px}
.r-rel{display:flex;gap:10px;align-items:baseline;margin:0 0 8px;color:var(--ink-2);font-size:15px}
.r-rel i{margin-top:0;transform:translateY(1px)}
.r-subject{margin:0 0 18px;font-size:14px;color:var(--muted)}
.r-address{font:italic 400 26px/1.35 var(--serif);color:var(--doc);margin:0 0 20px}
.r-sheet-note{margin:0 0 20px;padding:12px 14px;border-left:2px solid var(--doc);background:var(--doc-soft);font-size:14px;color:var(--ink-2);border-radius:0 3px 3px 0}
.r-sheet-note strong{color:var(--ink)}
.r-text{margin:0 0 22px;padding:0 0 0 18px;border-left:2px solid var(--line-2);font:400 20px/1.6 var(--serif);white-space:pre-line}
.r-text mark{background:none;color:var(--ink);box-shadow:inset 0 -.4em 0 rgba(179,84,30,.18)}
.r-interp{font:400 17px/1.6 var(--serif);color:var(--ink-2)}
.r-limit{border-top:1px solid var(--line);margin-top:24px;padding-top:14px}
.r-read h3{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:28px 0 10px}
.r-limit p{margin:0;color:var(--ink-2);font-size:15px}
.strip{list-style:none;margin:0;padding:0 0 8px;display:flex;gap:8px;overflow-x:auto}
.strip button{display:grid;gap:5px;width:92px;padding:0;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;text-align:left}
.strip button:hover{border-color:var(--line-2)}
.strip button[aria-pressed="true"]{border-color:var(--doc)}
.strip img{width:92px;height:74px;object-fit:cover;object-position:top;background:var(--surface-2);border-radius:2px}
.strip span{font-size:11px;color:var(--muted);padding:0 2px 2px}
.r-note{font-size:14px;color:var(--muted);margin:0 0 12px}
.r-details{margin-top:24px;font-size:14px;color:var(--ink-2)}
.r-details summary{cursor:pointer;min-height:34px}
.r-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px}
.linkish{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.linkish:hover{color:var(--doc);text-decoration-color:var(--doc)}

/* Overture */
.overture{position:fixed;inset:0;z-index:40;background:var(--surface);display:grid;grid-template-columns:1.25fr 1fr;transition:opacity .9s ease}
.overture.leave{opacity:0;pointer-events:none}
.overture.typeset{grid-template-columns:1fr}
.overture.typeset .ov-stage{display:none}
.ov-stage{position:relative;overflow:hidden;background:var(--surface-2)}
.ov-layer{position:absolute;left:0;top:0;transform-origin:0 0}
#ov-page{display:block;opacity:0;transition:opacity 1.6s,filter 1.6s;filter:contrast(.92)}
.overture.page #ov-page{opacity:1}
.overture.focus #ov-page{filter:contrast(.55) opacity(.32)}
.ov-crop{position:absolute;opacity:0;transition:opacity 1.2s}
.overture.focus .ov-crop{opacity:1}
.ov-text{align-self:center;padding:32px clamp(20px,4vw,60px)}
.ov-dateline{font:600 12px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity 1s}
.overture.dateline .ov-dateline{opacity:1}
.ov-lines{font:400 clamp(26px,3vw,44px)/1.24 var(--serif);margin:24px 0;min-height:4em;color:var(--ink)}
.ov-lines span{display:block;opacity:0;transform:translateY(8px);animation:rise .8s forwards}
.ov-lines span:nth-child(3){color:var(--doc)}
@keyframes rise{to{opacity:1;transform:none}}
.ov-caption{color:var(--muted);opacity:0;transition:opacity 1s;font-size:14px;max-width:48ch}
.overture.caption .ov-caption{opacity:1}
.ov-skip{position:absolute;right:20px;bottom:20px;min-height:var(--tap);background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:0 18px;cursor:pointer}

.foot{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;align-items:baseline;padding:26px clamp(16px,5vw,56px);border-top:1px solid var(--line);font-size:13px;color:var(--muted);background:var(--surface)}
.foot p{margin:0;max-width:84ch}

@media (min-width:901px){
  .atlas{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  body.has-panel .atlas{transform:translateX(calc(-1 * min(200px, 14vw)))}
}
@media (max-width:900px){
  .atlas{padding-top:24px}
  h1{font-size:clamp(32px,8.5vw,42px);margin-bottom:12px}
  .dek{font-size:16.5px;margin-bottom:18px}
  .start{padding:0 16px;font-size:14.5px;min-height:40px}
  /* The state is smaller here, so the newsprint inside it is denser, and there
     is no room for seventeen town names at once: the rings name themselves on
     tap, and every town is a link in the list below. */
  .ground{opacity:.09}
  .mark-label{font-size:14px}
  .mark.print .mark-label.always{opacity:0}
  .map-wrap{height:min(108vw,480px)}
  .map-key{max-width:none}
  .index-list{columns:auto}
  /* Covering the page means covering it: nothing reads through from behind. */
  .panel{width:100%;border-left:0;padding-top:22px;box-shadow:none}
  body.has-panel{overflow:hidden}
  /* In the dialog's flex column, flex:1 with min-height:0 let the grid shrink
     below its content and the caption printed over the transcription. On one
     column the grid takes its natural height and the dialog scrolls. */
  .r-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;flex:0 0 auto;height:auto;min-height:auto}
  .reader{overflow:auto}
  .r-stage-wrap{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .r-stage{min-height:min(46vh,340px);flex:0 0 auto;height:min(46vh,340px)}
  .r-read{overflow:visible}
  .r-bar{position:sticky;top:0;z-index:4}
  .overture{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .ov-lines{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}