/* ==========================================================
   COLORS AND FONTS  -  change these to restyle the whole site
   ========================================================== */
:root {
  --ink: #23221f;
  --muted: #66645e;
  --paper: #fdfdfb;
  --rule: #dddbd3;
  --link: #a1313a;          /* brick red, used for links and map points */
  --link-hover: #6f1d24;

  /* The four colors below come from the Sanborn map key
     (brick, frame, stone, water) and appear in the stripe under the menu. */
  --brick: #e3a1a7;
  --frame: #f1d24a;
  --stone: #93b78d;
  --water: #9dc4d9;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --measure: 48rem;         /* width of text columns */
  --wide: 68rem;            /* width of page */
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
}
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--frame); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
#site-header { border-bottom: 1px solid var(--rule); position: relative; }
.header-inner {
  max-width: var(--wide); margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.site-title {
  font-family: var(--sans); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
nav { order: 2; margin-left: auto; }
nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { font-family: var(--sans); font-size: 0.92rem; color: var(--muted); text-decoration: none; padding: 0.25rem 0; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--link); }
/* Menu button (small screens) and the dark mode button sit together. */
.header-controls { order: 3; align-self: center; flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; }
.menu-toggle {
  display: none; font-family: var(--sans); font-size: 0.95rem; background: none;
  border: 1px solid var(--rule); border-radius: 3px; padding: 0.4rem 0.8rem; color: var(--ink); cursor: pointer;
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle .icon { display: block; width: 1.1rem; height: 1.1rem; }
.sanborn-key { display: flex; height: 5px; }
.sanborn-key span { flex: 1; }
.sanborn-key span:nth-child(1) { background: var(--brick); }
.sanborn-key span:nth-child(2) { background: var(--frame); }
.sanborn-key span:nth-child(3) { background: var(--stone); }
.sanborn-key span:nth-child(4) { background: var(--water); }

/* ---------- Page layout ---------- */
main { max-width: var(--wide); margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.text { max-width: var(--measure); }
h1, h2, h3 { font-family: var(--sans); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
h1 { font-size: 2.1rem; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.4rem; }
.lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

.button {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.75rem 1.4rem; border-radius: 3px; margin-top: 0.5rem;
}
.button:hover { background: var(--link); color: #fff; }

/* ---------- Home ---------- */
.home-hero h1 { font-size: clamp(2rem, 5vw, 3rem); max-width: 18ch; }
.home-hero .lede { max-width: var(--measure); margin-bottom: 1.75rem; }

/* Banner image sits under the menu; the description follows below it. */
.home-page main { padding-top: 1.75rem; }
.home-banner { margin: 0 0 2.25rem; }
.home-banner img { display: block; width: 100%; border: 1px solid var(--rule); }
.home-page .home-hero h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
/* Index page: headline, its paragraph, and the button are centered. */
.home-page .home-hero { max-width: var(--measure); text-align: center; }
.home-page .home-hero h1 { margin-left: auto; margin-right: auto; }
.home-page .home-hero .lede { text-align: left; }   /* centered column, left-justified lines */
/* The tally sits between the lede and the button on the front page. It is
   centred like the rest of the hero rather than left-justified like the
   lede, so the chips line up on the page's own axis above the button. */
.home-page .home-hero .lede { margin-bottom: 0.9rem; }
.home-page .home-hero .map-tally { margin: 0 auto 1.6rem; text-align: center; }

/* ---------- Lists: publications, articles, people ---------- */
.entry-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.entry-list li { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.entry-list li:last-child { border-bottom: 1px solid var(--rule); }
.entry-list .title { font-family: var(--sans); font-weight: 600; }
.people { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.person img { width: 100%; max-width: 12rem; aspect-ratio: 1; object-fit: cover; background: var(--rule); display: block; margin-bottom: 0.75rem; }
.person h2 { font-size: 1.15rem; margin: 0; }
.person .role { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin: 0.1rem 0 0.5rem; }
.person p { margin: 0.25rem 0; font-size: 0.97rem; line-height: 1.55; }

/* ---------- Articles ---------- */
.article-head { max-width: var(--measure); }
.article-meta { font-family: var(--sans); font-size: 0.92rem; color: var(--muted); }
article.body { max-width: var(--measure); }
figure { margin: 2rem 0; }
figure img { display: block; width: 100%; border: 1px solid var(--rule); }
figcaption { font-size: 0.9rem; color: var(--muted); line-height: 1.5; margin-top: 0.5rem; }
.footnotes, .references { font-size: 0.93rem; line-height: 1.55; }
.references li { margin-bottom: 0.6rem; }
sup a { text-decoration: none; font-family: var(--sans); font-size: 0.8em; }

/* ---------- Map page ---------- */
.map-page main { max-width: none; padding: 0; }
.map-intro { max-width: var(--wide); margin: 0 auto; padding: 1.75rem 1.25rem 1rem; }
/* No font-size here: the atlas takes the same h1 as every other page, rather
   than reading as a lesser heading than Publications or Contact. */
.map-intro h1 { margin-bottom: 0.4rem; }
.map-intro p { margin: 0; max-width: var(--measure); color: var(--muted); }
/* The tally under the intro. Its numbers borrow the city chip's pill shape,
   border and type size so the two read as one family, with tighter vertical
   padding so they sit on a line of text without opening up the line height.
   They are labels, not controls - see buildTally in js/map.js. */
.map-tally { margin: 0.55rem 0 0; max-width: var(--measure); color: var(--muted); font-family: var(--sans); font-size: 0.92rem; }
.tally-num { display: inline-block; font-size: 0.88rem; padding: 0.05rem 0.55rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); }
/* One chip per city. Lit chips show which cities are on the map, and more
   than one can be lit where cities share a view; clicking any chip, lit or
   not, reframes the map on it. */
.map-tools { max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem 0.75rem; font-family: var(--sans); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.city-chip { font: inherit; font-size: 0.88rem; padding: 0.25rem 0.7rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px; cursor: pointer; }
.city-chip:hover { border-color: var(--link); color: var(--link); }
.city-chip[aria-pressed="true"] { background: var(--link); border-color: var(--link); color: #fff; }
.city-chip[aria-pressed="true"]:hover { background: var(--link-hover); border-color: var(--link-hover); color: #fff; }
/* The "show all cities" button sits under Leaflet's own +/- bar. */
.show-all-cities svg { width: 15px; height: 15px; vertical-align: middle; }
#map { height: 62vh; min-height: 22rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #e9e9e4; }
#details { max-width: var(--wide); margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* ---------- Map and details side by side (wider screens) ----------
   Stacked, the sheet list for the point you just clicked opens well below
   the fold, so the answer to a click is off screen. Above this width the
   details become a column beside the map and update in place.

   --map-chrome is the height of everything above the map: the header and
   its colour stripe, the title block and the chip row. Adjust it if you
   change their padding, or the map will not quite fill the window. */
@media (min-width: 60rem) {
  .map-page { --map-chrome: 15rem; }
  .map-layout {
    display: flex; align-items: stretch;
    height: calc(100vh - var(--map-chrome));
    height: calc(100dvh - var(--map-chrome));
    min-height: 30rem;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
  .map-layout #map { flex: 1; height: auto; min-height: 0; border: 0; }
  .map-layout #details {
    flex: none; width: 25rem; max-width: none; margin: 0;
    padding: 1.75rem 1.5rem 2.5rem; overflow-y: auto;
    border-left: 1px solid var(--rule);
  }
  /* The rail is narrower than the full-width panel was, so the sheet list
     drops its third column and puts the links under the title instead. */
  .map-layout .sheet-list { max-width: none; }
  .map-layout .sheet-list li { grid-template-columns: 3.2rem 1fr; }
  .map-layout .sheet-list .links { grid-column: 2; }
}
#details h2 { margin-top: 0; }
#details .where { font-family: var(--sans); color: var(--muted); margin: 0 0 1rem; font-size: 0.95rem; }
.sheet-list { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 46rem; }
.sheet-list li { display: grid; grid-template-columns: 4rem 1fr auto; gap: 0.75rem; align-items: baseline; padding: 0.65rem 0; border-top: 1px solid var(--rule); }
.sheet-list li:last-child { border-bottom: 1px solid var(--rule); }
.sheet-list .yr { font-family: var(--sans); font-weight: 600; }
.sheet-list .links { font-family: var(--sans); font-size: 0.9rem; display: flex; gap: 1rem; white-space: nowrap; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.link-button:hover { color: var(--link-hover); }
.note { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }
/* Leaflet's popup is rounded like a speech bubble by default; squaring it to
   3px matches the buttons used everywhere else on the site. */
.leaflet-popup-content-wrapper { border-radius: 3px; }
.leaflet-popup-content { font-family: var(--sans); font-size: 0.92rem; line-height: 1.45; margin: 0.8rem 1rem; }
.leaflet-popup-content strong { display: block; margin-bottom: 0.1rem; font-size: 1rem; }
.popup-meta { display: block; color: var(--muted); font-size: 0.85rem; }
.popup-years { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0.5rem; max-width: 17rem; }
/* Each year is a thing you can open, so it is drawn as a target rather than
   as underlined text, borrowing the shape of the city chips above the map. */
.popup-year { font: inherit; font-size: 0.8rem; padding: 0.15rem 0.55rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.popup-year:hover { border-color: var(--link); color: var(--link); }

/* Shown over the map until the workbook has been fetched and parsed, so a
   slow connection reads as loading rather than as an empty map. */
#map.is-loading::after {
  content: "Loading sites\2026";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 800; pointer-events: none;
  font-family: var(--sans); font-size: 0.9rem; color: var(--muted);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.3rem 0.9rem;
}

/* Grouped points. While zoomed out, sites too close together to tell apart
   are drawn as one numbered circle; clicking it zooms to the sites inside.
   These rules replace the plugin's own green and orange with the brick red
   used for single points, so a group reads as the same kind of thing. */
.leaflet-pane .marker-cluster { background: rgba(161, 49, 58, 0.25); }
.leaflet-pane .marker-cluster div { background: rgba(161, 49, 58, 0.92); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 0.78rem; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.leaflet-pane .marker-cluster-medium div { background: rgba(140, 38, 46, 0.94); }
.leaflet-pane .marker-cluster-large div { background: rgba(111, 29, 36, 0.96); }
.leaflet-pane .marker-cluster:hover div { background: var(--link-hover); }
/* Size carries the count as well as the number does, and narrows the jump
   from a 14px single point to a group. The plugin fixes the icon box at
   40px, so each size sets its own margin to stay centred inside it. */
.leaflet-pane .marker-cluster-small div { width: 26px; height: 26px; margin: 7px 0 0 7px; border-radius: 13px; }
.leaflet-pane .marker-cluster-small span { line-height: 26px; }
.leaflet-pane .marker-cluster-medium div { width: 32px; height: 32px; margin: 4px 0 0 4px; border-radius: 16px; }
.leaflet-pane .marker-cluster-medium span { line-height: 32px; }
.leaflet-pane .marker-cluster-large div { width: 38px; height: 38px; margin: 1px 0 0 1px; border-radius: 19px; }
.leaflet-pane .marker-cluster-large span { line-height: 38px; }

/* ---------- Scan viewer (zoomable map sheets) ---------- */
#viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(20,20,18,0.92); display: none; flex-direction: column; }
#viewer.open { display: flex; }
.viewer-bar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.7rem 1.25rem; color: #fff; font-family: var(--sans); font-size: 0.95rem; }
.viewer-bar a, .viewer-bar button { color: #fff; }
.viewer-bar button { background: none; border: 1px solid #888; border-radius: 3px; padding: 0.35rem 0.8rem; font: inherit; cursor: pointer; }
.viewer-bar .actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.viewer-count { color: #bbb; margin-left: 0.5rem; white-space: nowrap; }
.viewer-bar button:disabled { opacity: 0.35; cursor: default; }
.viewer-bar button:not(:disabled):hover { background: #444; }
.viewer-nav[hidden] { display: none; }
#viewer-map { flex: 1; background: #222; }

/* ---------- Footer ---------- */
#site-footer { border-top: 1px solid var(--rule); }
.footer-inner { max-width: var(--wide); margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.footer-inner .ack { max-width: var(--measure); font-size: 0.95rem; color: var(--muted); margin: 0 0 1rem; }
.footer-inner .logos { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.footer-inner .logos img { max-height: 3rem; width: auto; }
.footer-inner .copyright { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0; }

/* ---------- Header: collapse the menu before it runs out of room ----------
   The title, the full menu, and the dark mode button need roughly 47rem
   side by side. Collapsing the menu at 52rem means the dark mode button
   never gets pushed onto a line of its own. If you add or rename menu
   items, widen this breakpoint to match. */
@media (max-width: 40rem) {
  .menu-toggle { display: inline-block; }
  nav { width: 100%; display: none; order: 4; margin-top: 0.5rem; }
  .menu-open nav { display: block; }
  nav ul { flex-direction: column; gap: 0.25rem; padding-top: 0.5rem; }
  nav a { display: block; padding: 0.6rem 0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 40rem) {
  body { font-size: 0.97rem; }
  h1 { font-size: 1.75rem; }
  .sheet-list li { grid-template-columns: 3.2rem 1fr; }
  .sheet-list .links { grid-column: 2; }
  #map { height: 55vh; }
  /* On a phone the chips scroll sideways in one row rather than wrapping
     onto three lines and pushing the map off the screen. */
  .map-tools { flex-wrap: nowrap; overflow-x: auto; }
  .city-chip { white-space: nowrap; flex: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ==========================================================
   CENTERED TEXT COLUMNS
   Text stays left-aligned, but the column sits in the middle
   of the page. Change --measure at the top to widen it.
   ========================================================== */
.text, .home-hero, .entry-list, .article-head, article.body,
.footer-inner .ack {
  margin-left: auto; margin-right: auto;
}
main > h1, main > h2, main > h3, main > p, main > .note {
  max-width: var(--measure); margin-left: auto; margin-right: auto;
}
/* The map page is left-aligned: its heading, intro, city chips, and sheet
   list all start at the left edge, not in a centered column. */
.footer-inner .copyright, .footer-inner .logos {
  max-width: var(--measure); margin-left: auto; margin-right: auto;
}

/* ==========================================================
   DARK MODE
   These colors replace the ones at the top of the file when
   dark mode is switched on. Edit them to taste.
   ========================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9e7e1;
  --muted: #a4a19a;
  --paper: #17171a;
  --rule: #35342e;
  --link: #e7a3a9;
  --link-hover: #f3c3c8;
}
[data-theme="dark"] #map { background: #2a2a28; }
/* The lit chip needs its background restated here, not just its text colour:
   the plain dark rule above matches as tightly as the lit rule further up the
   file, so without this the later one wins and the chip goes dark on dark. */
[data-theme="dark"] .city-chip { background: #222226; }
[data-theme="dark"] .city-chip[aria-pressed="true"] { background: var(--link); border-color: var(--link); color: #1a1a1a; }
[data-theme="dark"] .city-chip[aria-pressed="true"]:hover { background: var(--link-hover); border-color: var(--link-hover); color: #1a1a1a; }
[data-theme="dark"] .person img { background: #2a2a28; }
[data-theme="dark"] .button:hover { color: #1a1a1a; }

/* Leaflet draws its own popups and controls in white. Left alone they glow
   against a dark page, so they are restated here to match. The basemap
   itself is swapped for Esri's dark counterpart in js/map.js. */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip { background: #222226; color: var(--ink); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .leaflet-popup-close-button { color: var(--muted); }
/* A year chip at the popup's own background would vanish, so it is lifted. */
[data-theme="dark"] .popup-year { background: #2d2d33; border-color: #3a3a40; }
[data-theme="dark"] .popup-year:hover { border-color: var(--link); color: var(--link); }
[data-theme="dark"] .leaflet-popup-close-button:hover { color: var(--ink); }
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-control-layers { background: #222226; color: var(--ink); border-color: #3a3a40; }
[data-theme="dark"] .leaflet-bar a { border-bottom-color: #3a3a40; }
[data-theme="dark"] .leaflet-bar a:hover { background: #2d2d33; color: var(--ink); }
[data-theme="dark"] .leaflet-bar a.leaflet-disabled { background: #1c1c20; color: #585650; }
/* The layers icon is a dark PNG; inverting it keeps it legible on the dark button. */
[data-theme="dark"] .leaflet-control-layers-toggle { filter: invert(0.88); }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(23, 23, 26, 0.85); color: var(--muted); }
[data-theme="dark"] .leaflet-control-attribution a { color: var(--link); }

/* Against the dark basemap the brick red of the points and groups sits too
   close to the map itself, so both are lifted to a brighter tone of the same
   red. A CSS fill beats the colour Leaflet writes onto the circle as an
   attribute, so the selected point keeps its yellow ring. The white ring
   around a group becomes dark here: on a dark map it was doing the glaring
   rather than the separating. */
[data-theme="dark"] #map path.leaflet-interactive { fill: #d4545f; }
[data-theme="dark"] .leaflet-pane .marker-cluster { background: rgba(212, 84, 95, 0.3); }
[data-theme="dark"] .leaflet-pane .marker-cluster div { background: rgba(212, 84, 95, 0.95); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .leaflet-pane .marker-cluster-medium div { background: rgba(195, 69, 79, 0.96); }
[data-theme="dark"] .leaflet-pane .marker-cluster-large div { background: rgba(178, 55, 66, 0.97); }
[data-theme="dark"] .leaflet-pane .marker-cluster:hover div { background: var(--link-hover); color: #2a1013; }

/* ==========================================================
   PROGRESS BADGE
   Shown next to the site name in the panel below the map.
   The label and colour come from the progress and
   progress_color columns on the Points sheet.
   ========================================================== */
.progress-badge {
  display: inline-block; vertical-align: 0.18em;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.6;
  color: #fff; background: var(--badge, var(--link));
  border-radius: 999px; padding: 0 0.65em;
  margin-left: 0.6rem; white-space: nowrap;
}
[data-theme="dark"] .progress-badge { color: #fff; filter: brightness(1.15); }