/* ============================================================================
   Township & Borough — Layout & page chrome
   ========================================================================== */

/* ---- masthead: reads like a running head over a hairline rule ---- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--gutter) 0.55rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.masthead__title {
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.masthead__title a { color: var(--ink); border: 0; }
@media (hover: hover) { .masthead__title a:hover { color: var(--oxblood); } }
.masthead__nav {
  display: flex;
  gap: clamp(0.9rem, 2.4vw, 2.2rem);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.98rem;
}
.masthead__nav a {
  color: var(--ink-soft);
  border: 0;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
@media (hover: hover) { .masthead__nav a:hover { color: var(--ink); } }
.masthead__nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--oxblood);
}

/* ---- the menu button: hidden until the nav has to collapse ---- */
.masthead__menu { display: none; }

/* ---- the collapsed nav -------------------------------------------------
   Two conditions want the same thing, so the switch is separated from the
   appearance. The appearance (a sheet dropped from the bar) is unconditional
   and keyed on .nav-open; only the show/hide switch is conditional.

   Condition 1: a narrow screen. Four letterspaced small-caps nav items will
   not share a phone bar with the running head, so below 720px they stacked
   into two rows and 78px of chrome.

   Condition 2: ANY width, if the bar carries the find field. That bar already
   holds a monogram, a search field and a bullseye; adding six nav items
   overflowed it horizontally at 744px and up, which inflated the layout
   viewport and left the map short of the bottom of the screen. The field is
   worth more in that bar than the nav is. */
.masthead__menu { display: none; }

@media (max-width: 720px) {
  .masthead { align-items: center; padding: 0.45rem var(--gutter); gap: 0.6rem; }
  .masthead__title { font-size: 0.78rem; letter-spacing: 0.18em; }
  .masthead__nav { display: none; }
  .masthead__menu { display: flex; }
}
@media (min-width: 721px) {
  .masthead:has(.masthead__find) { align-items: center; }
  .masthead:has(.masthead__find) .masthead__nav { display: none; }
  .masthead:has(.masthead__find) .masthead__menu { display: flex; }
}
/* ...and when the sheet is open, the nav comes back as a dropdown */
.masthead.nav-open .masthead__nav { display: flex; }

.masthead__menu {
  align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  margin: -0.35rem calc(var(--gutter) * -0.35) -0.35rem 0;
  padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink-soft);
}
/* three rules, letterpress-thin, drawn rather than glyphed so they match the
   hairlines everywhere else on the page */
.masthead__menu-bars,
.masthead__menu-bars::before,
.masthead__menu-bars::after {
  content: ""; display: block; width: 20px; height: 1.5px;
  background: currentColor; transition: transform .18s ease, opacity .18s ease;
}
.masthead__menu-bars { position: relative; }
.masthead__menu-bars::before { position: absolute; top: -6px; }
.masthead__menu-bars::after  { position: absolute; top:  6px; }
/* opacity on the parent would create a group its children could not escape,
   so the middle rule is hidden by clearing its background */
.masthead__menu[aria-expanded="true"] .masthead__menu-bars { background: transparent; }
.masthead__menu[aria-expanded="true"] .masthead__menu-bars::before { transform: translateY(6px) rotate(45deg); }
.masthead__menu[aria-expanded="true"] .masthead__menu-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* the sheet itself — appearance only, so both conditions share it */
.masthead.nav-open .masthead__nav {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; gap: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 6px 18px rgba(42,38,32,0.10);
  font-size: 1.05rem;
  max-height: 70svh; overflow-y: auto;
  z-index: 55;
}
.masthead.nav-open .masthead__nav a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}
.masthead.nav-open .masthead__nav a[aria-current="page"] {
  border-bottom-color: var(--rule-soft);
  background: color-mix(in srgb, var(--lathrop-peach) 28%, transparent);
  box-shadow: inset 3px 0 0 var(--oxblood);
}

/* ---- generic page frame ---- */
.page { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) 4rem; }
.wrap { max-width: 62rem; margin: 0 auto; }
.measure { max-width: var(--measure); margin-inline: auto; }

.page-head { text-align: center; margin-bottom: 2.5rem; }
.page-head h1 { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3rem); }
.page-head .kicker {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  font-size: 0.8rem;
  margin-bottom: 0.9rem;
}

/* ============================================================================
   HERO  (index)
   ========================================================================== */
.hero {
  min-height: calc(100svh - var(--masthead-h, 3rem));
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
  filter: contrast(1.02) brightness(0.98);
  transform-origin: center 42%;
  transition: transform .12s ease-out;
  will-change: transform;
}
/* SPACE toggles this: fade the type, keep the photograph */
.hero.bare .hero__plate,
.hero.bare .hero__foot { opacity: 0; pointer-events: none; }
.hero.bare::before { opacity: 0.35; }
.hero__plate, .hero__foot, .hero::before { transition: opacity .4s ease; }
/* vignette + cream wash so the title reads and the photo feels tipped-in */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(20,17,12,0.35) 100%),
    linear-gradient(to bottom, rgba(255,255,248,0.60) 0%, rgba(255,255,248,0.08) 22%, rgba(20,17,12,0.10) 60%, rgba(20,17,12,0.42) 100%);
}
.hero__plate {
  align-self: start;
  text-align: center;
  padding: clamp(2rem, 8vh, 6rem) var(--gutter) 0;
  color: #f7f1df;
  text-shadow: 0 1px 18px rgba(0,0,0,0.55);
}
.hero__plate h1 { color: #f8f2e0; }
.hero__being {
  font-variant: small-caps;
  letter-spacing: 0.32em;
  font-size: 0.82rem;
  opacity: 0.85;
  margin: 1.4rem 0 0.4rem;
}
.hero__sub {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.8rem, 0.5rem + 0.8vw, 1.05rem);
  font-weight: 400;
  line-height: 1.7;
  opacity: 0.94;
}
.hero__foot {
  align-self: end;
  padding: 0 var(--gutter) clamp(2rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  z-index: 1;
}
.hero__epigraph {
  color: #f2ecd8;
  text-shadow: 0 1px 14px rgba(0,0,0,0.6);
}
.hero__epigraph cite { color: #d8ceb2; }
.hero__caption {
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: #d8cdb0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}

/* call-to-view button, letterpress style */
.btn {
  display: inline-block;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.95rem;
  padding: 0.5rem 1.4rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  box-shadow: 3px 3px 0 rgba(42,38,32,0.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (hover: hover) { .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(42,38,32,0.35); color: var(--oxblood); } }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(42,38,32,0.3); }

/* ============================================================================
   SPY VIEW  (spy)
   ========================================================================== */
.spy {
  height: calc(100svh - var(--masthead-h, 3rem));   /* fallback; see body.map-page */
  position: relative;
  overflow: hidden;
}

/* ---- map pages: the map takes whatever the chrome leaves -----------------
   A map page does not scroll, so the masthead has nothing to stick to and the
   viewport height can be divided by flex instead of guessed at. This is what
   fixes the phone bug: `calc(100svh - 3rem)` assumed a one-line 48px masthead,
   but the masthead is 78px on a phone, so the map ran 30px past the bottom of
   the screen and took the zoom controls and the hint pill with it. */
body.map-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.map-page .masthead { position: relative; z-index: 40; flex: 0 0 auto; }
body.map-page .spy,
body.map-page .strip { flex: 1 1 auto; height: auto; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--paper-deep); cursor: crosshair; }
.ol-viewport { cursor: crosshair; }

/* left column: control card + (below it) the overlay legend */
.spy__left {
  position: absolute;
  top: 1.1rem; left: 1.1rem;
  z-index: 20;
  width: min(19rem, calc(100vw - 2.2rem));
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: calc(100% - 2.2rem);
}

/* floating control card, letterpress ticket */
.spy__panel {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--rule);
  box-shadow: 4px 4px 0 rgba(42,38,32,0.18);
  padding: 1rem 1.15rem 1.15rem;
  backdrop-filter: blur(4px);
}

/* overlay legend, materialised below the panel when zoning / land use is on */
.legend-card {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--rule);
  box-shadow: 4px 4px 0 rgba(42,38,32,0.18);
  padding: 0.8rem 1.05rem 0.9rem;
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.legend-card[hidden] { display: none; }
.legend-card__h {
  font-variant: small-caps; letter-spacing: 0.16em; font-size: 0.82rem;
  color: var(--ink-soft); text-transform: none; margin: 0 0 0.55rem;
}
.legend-card__row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--ink-soft); padding: 0.13rem 0;
}
.legend-card__sw {
  width: 0.9rem; height: 0.9rem; flex: none;
  border: 1px solid; border-radius: 2px;
}
.legend-card__note { font-size: 0.72rem; color: var(--ink-faint); font-style: italic; margin: 0.5rem 0 0; }

/* copy-link (permalink) button */
.copylink {
  display: block; width: 100%; margin-top: 1rem;
  font: inherit; font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.8rem;
  color: var(--ink-soft); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.4rem 0.5rem;
  transition: color .12s, border-color .12s;
}
@media (hover: hover) { .copylink:hover { color: var(--ink); border-color: var(--lathrop); } }
.copylink.copied { color: var(--oxblood); border-color: var(--lathrop); }
.spy__panel h2 { font-size: 1rem; letter-spacing: 0.18em; }
.spy__panel .kicker {
  display:block; font-variant: small-caps; letter-spacing: 0.22em;
  color: var(--ink-faint); font-size: 0.72rem; margin-bottom: 0.35rem;
}
.spy__panel p { font-size: 0.86rem; color: var(--ink-soft); margin: 0.5rem 0 0.9rem; text-align: left; }
.field { margin-top: 0.9rem; }
.field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.82rem;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}
.field label .val { font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--rule); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--oxblood); border: 2px solid var(--paper); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--oxblood); border: 2px solid var(--paper); cursor: pointer;
}
/* address search */
.search { position: relative; margin: 0.2rem 0 0.9rem; }
.search input {
  width: 100%; box-sizing: border-box;
  /* 16px floor: below it, iOS Safari zooms the whole page on focus, which on a
     map page throws the reader somewhere they did not ask to be. */
  font-family: var(--serif); font-size: max(1rem, 0.95rem); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  padding: 0.42rem 0.6rem; outline: none;
}
.search input:focus { border-color: var(--oxblood); }
.search input::placeholder { color: var(--ink-faint); font-style: italic; }
.search__results {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 25;
  list-style: none; margin: 0; padding: 0;
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 3px 3px 0 rgba(42,38,32,0.16);
  max-height: 15rem; overflow-y: auto;
}
.search__results[hidden] { display: none; }
.search__results li {
  padding: 0.36rem 0.6rem; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer;
  border-bottom: 1px dotted var(--rule-soft);
}
@media (hover: hover) { .search__results li:hover { background: color-mix(in srgb, var(--lathrop-peach) 55%, transparent); color: var(--ink); } }

/* overlay legend (1–4), clickable, current = Lathrop peach */
.overlays { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-top: 1rem;
  border-top: 1px solid var(--rule-soft); padding-top: 0.8rem; }
.ov {
  display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left;
  font: inherit; font-variant: small-caps; letter-spacing: 0.06em; font-size: 0.82rem;
  color: var(--ink-faint); background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 0.22rem 0.35rem; cursor: pointer;
}
@media (hover: hover) { .ov:hover { color: var(--ink); } }
.ov__k { font-family: var(--mono); font-variant: normal; font-size: 0.78rem;
  border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.32rem; color: var(--ink-soft); }
.ov.on { color: var(--ink); border-color: var(--lathrop);
  background: color-mix(in srgb, var(--lathrop-peach) 50%, transparent); }
.ov.on .ov__k { border-color: var(--lathrop); color: var(--oxblood); background: var(--paper); }

/* the two time-stack rows (also clickable buttons) */
.stack { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.stack__row {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 0.6rem;
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink-soft);
  background: none; border: 0; border-top: 1px solid var(--rule-soft);
  padding: 0.5rem 0 0;
}
@media (hover: hover) { .stack__row:hover { color: var(--ink); } }
.stack__key {
  font-family: var(--mono); font-size: 0.9rem; color: var(--oxblood);
  border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.3rem; line-height: 1.3;
}
.stack__lab { font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--ink-faint); }
.stack__val { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); text-align: right; }

.spy__hint {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 20; font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.78rem;
  color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: 0.3rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px;
  pointer-events: none;
}
.spy__hint .k {
  font-family: var(--mono); color: var(--oxblood); font-variant: normal; letter-spacing: 0;
  border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.28rem;
}

/* --- the two time-stacks overlay (Shift to reveal / flashed on arrow nav) --- */
:root {                          /* Lathrop-atlas palette */
  --lathrop-orange: #e78452;
  --lathrop-peach:  #efc6a5;
  --lathrop-cream:  #efdebd;
  --lathrop: var(--lathrop-orange);   /* highlight stroke; peach is the highlight fill */
}
.layerlist {
  position: absolute; inset: 0; z-index: 30;
  display: flex; gap: clamp(1.5rem, 6vw, 5rem);
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
.layerlist.show { opacity: 1; }
.layerlist[hidden] { display: none; }
.layerlist__col { min-width: 12rem; }
.layerlist__h {
  font-variant: small-caps; letter-spacing: 0.16em; font-size: 0.9rem;
  color: var(--ink-soft); text-transform: none; margin: 0 0 0.8rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem;
}
.layerlist ul { list-style: none; margin: 0; padding: 0; }
.layerlist li {
  font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft);
  padding: 0.32rem 0.6rem; margin: 0.18rem 0;
  border: 2px solid transparent; border-radius: 4px; white-space: nowrap;
}
.layerlist li.cur {
  color: var(--ink);
  border-color: var(--lathrop);
  background: color-mix(in srgb, var(--lathrop-peach) 55%, transparent);
}
/* lens maps with no data under the lens right now: the arrows skip these, so
   show that rather than leaving the skip unexplained */
.layerlist li.empty {
  opacity: 0.34;
  font-style: italic;
  cursor: default;
}
.layerlist li.empty.cur { opacity: 0.7; }

/* re-skin the few OL controls we keep */
.ol-zoom { top: auto; bottom: 1rem; right: 1rem; left: auto; }
.ol-control button {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  font-family: var(--serif); font-weight: 500;
}
@media (hover: hover) { .ol-control button:hover { color: var(--oxblood) !important; } }
.ol-attribution { font-family: var(--mono); font-size: 0.7rem; }

/* ============================================================================
   RESOURCES & WRITINGS
   ========================================================================== */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
}
.card {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.card h3 { color: var(--ink); margin-bottom: 0.8rem; }

/* download / link list, ledger style */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--rule);
}
.ledger li:last-child { border-bottom: 0; }
.ledger .name { border: 0; }
.ledger .meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); white-space: nowrap; }
.ledger .desc { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-soft); margin: 0.1rem 0 0; text-align: left; }

/* books — a small cover the text wraps around, not a grid column.
   Reserving a cover *column* (the first attempt) left a tall empty gutter under
   each thumbnail: the row height is set by the description, not the image, so a
   64px cover in a 300px card wasted ~100px of dead column — and shrinking the
   cover made the gutter proportionally worse, not better. It also squeezed the
   title into ~220px, wrapping two of the three. Floating the cover inside a
   block li fixes both: no reserved column, and the title gets the full width.
   overflow:hidden clears the float so the dotted rule sits below the cover. */
.ledger--books li { display: block; overflow: hidden; }
.ledger--books .cover {
  float: left;
  width: 2.75rem;
  height: auto;
  margin: 0.25rem 0.75rem 0.25rem 0;
  border: 1px solid var(--rule);
  box-shadow: 2px 2px 0 rgba(42, 38, 32, 0.14);
}
.ledger--books .desc { margin-top: 0.15rem; }

/* writings — table of contents */
.toc { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 44rem; margin-inline: auto; }
.toc li { padding: 1.2rem 0; border-bottom: 1px solid var(--rule-soft); }
.toc .date { font-variant: small-caps; letter-spacing: 0.14em; color: var(--ink-faint); font-size: 0.76rem; }
.toc h3 { font-size: 1.15rem; letter-spacing: 0.04em; text-transform: none; color: var(--ink); margin: 0.25rem 0 0.4rem; }
.toc h3 a { border: 0; color: var(--ink); }
@media (hover: hover) { .toc h3 a:hover { color: var(--oxblood); } }
.toc .dek { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* ---- footer ---- */
.colophon {
  border-top: 1px solid var(--rule);
  padding: 2rem var(--gutter);
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
}
.colophon .fleuron { margin: 0 0 1rem; font-size: 1.1rem; }
.colophon a { color: var(--ink-soft); border-bottom-color: var(--rule-soft); }

/* accessibility: skip link */
.skip {
  position: absolute; left: -999px;
}
.skip:focus { left: var(--gutter); top: 0.5rem; z-index: 100; background: var(--paper); padding: 0.4rem 0.8rem; border: 1px solid var(--ink); }

@media (max-width: 560px) {
  p + p { text-indent: 1em; }
  .ledger--books .cover { width: 2.25rem; margin-right: 0.6rem; }
}


/* ============================================================================
   TOUCH — coarse pointers only. Desktop metrics are untouched above.
   ========================================================================== */
@media (pointer: coarse) {
  /* 44px minimum hit box (Apple HIG / Material). The visual weight of these
     controls stays put; only the padding grows, so the letterpress ticket
     still reads as a ticket. */
  .ov,
  .stack__row,
  .copylink,
  .search__results li { min-height: 44px; }
  .ov { padding: 0.5rem 0.5rem; }
  .search__results li { display: flex; align-items: center; }
  .stack__row { padding-top: 0.7rem; padding-bottom: 0.3rem; }

  /* A 15px thumb on a 2px track is not draggable with a thumb. The element
     grows to a 44px hit box and the visible 6px track moves to the track
     pseudo-element, so the rule still LOOKS like a hairline rule. */
  input[type="range"] { height: 44px; background: transparent; }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; background: var(--rule); border-radius: 3px;
  }
  input[type="range"]::-moz-range-track {
    height: 6px; background: var(--rule); border-radius: 3px;
  }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  .field label { font-size: 0.9rem; }

  .search input { min-height: 44px; }

  /* OpenLayers' own controls ship at 34px, and its attribution toggle at 23 */
  .ol-control button { min-width: 44px; min-height: 44px; font-size: 1.2rem; }
  .ol-attribution button { min-width: 44px; min-height: 44px; }

  /* the OL zoom buttons, and anything else docked low, must clear the iOS
     home indicator — and each other: at 44px the zoom stack grew down into
     the attribution toggle, which shares the bottom-right corner. */
  .ol-zoom { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .ol-attribution {
    bottom: calc(0.5rem + env(safe-area-inset-bottom));
    right: auto; left: 0.5rem;
  }

  /* no cursor to draw */
  #map, .ol-viewport { cursor: default; }
}

/* ---- copy that depends on what the device HAS, not how wide it is -------
   A laptop with a touchscreen is both, and should read as both. */
.only-coarse { display: none; }
@media (pointer: coarse) {
  .only-fine { display: none; }
  .only-coarse { display: block; }
  /* the keyboard legend is a legend for hardware that isn't there */
  .spy__hint { display: none; }
}

/* ============================================================================
   THE FIND BAR — address field + bullseye, in the masthead of the map pages
   MOBILE.md §2.2 and §3. The bar earns its 48 px by carrying the two things a
   newcomer actually wants: where am I, and take me somewhere.
   ========================================================================== */
.masthead__find {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 0.4rem;
  min-width: 0;
  max-width: 26rem;
  margin-inline: auto;
}
.find { position: relative; flex: 1 1 auto; min-width: 0; }
.find input {
  width: 100%; box-sizing: border-box;
  font-family: var(--serif);
  /* 16px floor: below it, iOS Safari zooms the whole page on focus, which on a
     map page throws the reader somewhere they did not ask to be */
  font-size: max(1rem, 0.95rem);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.3rem 0.55rem; min-height: 34px;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.find input:focus { border-color: var(--oxblood); }
.find input::placeholder { color: var(--ink-faint); font-style: italic; }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }

.find__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60;
  list-style: none; margin: 0; padding: 0;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 3px 3px 0 rgba(42,38,32,0.16);
  max-height: 60svh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.find__results[hidden] { display: none; }
.find__results li {
  padding: 0.4rem 0.6rem; font-size: 0.9rem; color: var(--ink-soft);
  border-bottom: 1px dotted var(--rule-soft); cursor: pointer;
}
@media (hover: hover) {
  .find__results li:hover {
    background: color-mix(in srgb, var(--lathrop-peach) 55%, transparent);
    color: var(--ink);
  }
}

.find__eye {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; color: var(--ink-soft);
  background: none; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer;
}
.find__eye svg { width: 21px; height: 21px; display: block; }
.find__eye[hidden] { display: none; }
@media (hover: hover) { .find__eye:hover { color: var(--oxblood); } }
/* the bullseye closing on a fix */
.find__eye.is-busy { color: var(--oxblood); animation: eye-close 1.1s ease-in-out infinite; }
@keyframes eye-close { 50% { opacity: 0.35; } }

/* the bullseye's answers: one plain line, under the bar, never a dialog */
.masthead__msg {
  position: absolute; left: 0; right: 0; top: 100%;
  margin: 0; padding: 0.4rem var(--gutter) 0.45rem;
  font-family: var(--archive); font-style: italic; font-size: 0.88rem;
  color: var(--ink-soft); text-align: center;
  background: color-mix(in srgb, var(--lathrop-cream) 45%, var(--paper));
  border-bottom: 1px solid var(--rule);
}
.masthead__msg[hidden] { display: none; }

@media (pointer: coarse) {
  .masthead__title a { display: flex; align-items: center; min-height: 44px; }
  .find__eye { width: 44px; height: 44px; }
  .find input { min-height: 40px; }
  .find__results li { min-height: 44px; display: flex; align-items: center; }
}
/* the running head contracts to a monogram so the field gets the width */
@media (max-width: 720px) {
  .masthead__title a { font-size: 0; }
  .masthead__title a::before {
    content: "T&B"; font-size: 0.82rem; letter-spacing: 0.14em;
  }
  .masthead__find { max-width: none; margin-inline: 0; }
}

/* the frontispiece now offers a tour first and an instrument second */
.hero__foot .btn { margin: 0.3rem 0.35rem; }
@media (max-width: 560px) {
  .hero__foot .btn { display: block; margin: 0.4rem auto; max-width: 20rem; }
}