:root {
  --ink: #20241f;
  --muted: #6f756d;
  --paper: #f7f4ec;
  --panel: #eeece4;
  --line: #d8d3c7;
  --moss: #46594b;
  --moss-dark: #2f4036;
  --ochre: #ad7441;
  --blue: #607985;
  --shadow: 0 18px 45px rgb(39 43 37 / 12%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }

.masthead {
  position: sticky;
  z-index: 1000;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgb(247 244 236 / 94%);
  backdrop-filter: blur(12px);
}
.identity { max-width: min(720px, 68vw); color: inherit; text-decoration: none; }
.identity__eyebrow, .identity__title { display: block; }
.identity__eyebrow { margin-bottom: 2px; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.identity__title { font-family: Georgia, serif; font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.15; }
.masthead__actions { display: flex; align-items: center; gap: 10px; }
.quiet-button, .icon-button, .page-nav button {
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
}
.quiet-button { padding: 9px 14px; }
.icon-button { display: none; padding: 9px 14px; }
.map-toggle { align-items: center; gap: 6px; white-space: nowrap; }
.map-toggle[aria-expanded="true"] { border-color: var(--moss); background: var(--moss); color: var(--paper); }

.workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); min-height: calc(100vh - 76px); }
.reader { position: relative; min-width: 0; padding: clamp(42px, 6vw, 90px) clamp(28px, 7vw, 110px) 80px; }
.text-minimap { position: fixed; z-index: 850; top: 158px; bottom: 22px; left: clamp(10px, 1.8vw, 28px); display: flex; width: 18px; flex-direction: column; gap: 1px; padding: 4px; border: 1px solid rgb(70 89 75 / 18%); border-radius: 5px; background: rgb(247 244 236 / 86%); box-shadow: 0 5px 18px rgb(39 43 37 / 8%); backdrop-filter: blur(8px); }
.text-minimap__mark { min-height: 1px; flex: 1 1 0; padding: 0; border: 0; border-radius: 1px; background: #cbc8be; opacity: .48; cursor: pointer; transition: background-color .12s ease, opacity .12s ease, transform .12s ease; }
.text-minimap__mark.is-active { background: var(--moss); opacity: .72; }
.text-minimap__mark.is-preview { background: var(--ochre); opacity: 1; transform: scaleX(1.65); transform-origin: left center; }
.text-minimap__mark:hover, .text-minimap__mark:focus-visible { background: var(--ochre); opacity: 1; outline: 1px solid var(--paper); transform: scaleX(1.65); transform-origin: left center; }
.reader__meta { display: flex; gap: 8px; margin-bottom: 38px; color: var(--muted); font-size: .82rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.reader__heading-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.kicker { margin: 0 0 8px; color: var(--ochre); font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h1 { max-width: 690px; margin: 0; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 1.5rem; }
.view-switch { display: inline-flex; flex-shrink: 0; padding: 3px; border: 1px solid var(--line); border-radius: 99px; }
.view-switch__button { padding: 7px 10px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: .76rem; cursor: pointer; }
.view-switch__button.is-active { background: var(--moss); color: white; }
.entry-copy { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 1.3vw, 1.24rem); line-height: 1.85; }
.entry-copy p { margin: 0 0 1.2em; }
.entry-copy.exact { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; line-height: 1.7; }
.source-gallery { display: grid; gap: 28px; margin: 30px 0 0; }
.source-item { margin: 0; }
.source-item img { display: block; width: 100%; max-height: 75vh; object-fit: contain; border: 1px solid var(--line); background: #dedbd3; box-shadow: var(--shadow); }
.source-item figcaption { margin-top: 10px; color: var(--muted); font-size: .78rem; }
.back-link { margin-top: 18px; padding: 0; border: 0; background: transparent; color: var(--moss); font-size: .8rem; font-weight: 700; cursor: pointer; }
.linked-entity { padding: 0 2px; border: 0; border-bottom: 1px solid var(--ochre); background: #efe4d6; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; }
.linked-entity:hover, .linked-entity:focus { background: #e4cfb6; }
.result-intro { margin: 30px 0; padding: 16px 18px; border-left: 3px solid var(--moss); background: #e8ebe5; color: #505950; font-size: .88rem; line-height: 1.6; }
.passage-result { margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.passage-sources { display: block; margin-top: 10px; color: var(--muted); font-family: Inter, sans-serif; font-size: .7rem; }
.page-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.page-nav--top { position: sticky; z-index: 900; top: 76px; display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; margin: 0 0 38px; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line); background: rgb(247 244 236 / 96%); backdrop-filter: blur(10px); }
.page-nav--top > :first-child { justify-self: start; }
.page-nav--top > span { justify-self: center; }
.page-nav--top > :last-child { justify-self: end; }
.page-nav button { padding: 9px 14px; }
.page-nav button:disabled { opacity: .35; cursor: default; }

.context { position: sticky; top: 76px; align-self: start; height: calc(100vh - 76px); overflow-y: auto; scroll-margin-top: 76px; border-left: 1px solid var(--line); background: var(--panel); }
.map-wrap { position: relative; height: 43vh; min-height: 330px; }
#map { height: 100%; background: #dfe2dd; }
.leaflet-tile-pane { filter: grayscale(.7) sepia(.16) contrast(.88); }
.map-key { position: absolute; z-index: 500; right: 14px; bottom: 14px; display: flex; gap: 12px; padding: 8px 10px; border: 1px solid rgb(0 0 0 / 10%); border-radius: 6px; background: rgb(247 244 236 / 92%); color: var(--muted); font-size: .66rem; }
.key-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; }
.key-dot--confirmed { background: var(--moss); }
.key-dot--probable { background: var(--ochre); }
.key-dot--approximate { border: 2px solid var(--blue); }
.journey-panel, .entities { padding: 28px 32px; }
.entities { padding-block: 18px; border-top: 1px solid var(--line); }
.connected-records-label { margin-bottom: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.step-count { color: var(--muted); font-size: .78rem; }
.timeline { width: 100%; margin: 28px 0 3px; accent-color: var(--moss); }
.timeline-range { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; }
.place-card { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255 255 255 / 42%); }
.place-card__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.place-card h3 { margin: 0; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; }
.place-card p { margin: 9px 0 0; color: #555b54; font-size: .82rem; line-height: 1.55; }
.confidence { display: inline-block; padding: 4px 7px; border-radius: 99px; background: #dde6df; color: var(--moss-dark); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.confidence--probable { background: #f0dfca; color: #795735; }
.confidence--approximate { background: #dce5e8; color: #49626d; }
.evidence { display: block; margin-top: 11px; color: var(--muted); font-size: .72rem; }
.entity-list { display: flex; flex-wrap: wrap; gap: 8px; }
.entity-chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgb(255 255 255 / 35%); color: #4e554e; font-size: .75rem; }
.entity-chip::before { margin-right: 6px; color: var(--ochre); content: attr(data-type); font-size: .58rem; font-weight: 800; text-transform: uppercase; }

dialog { width: min(560px, calc(100vw - 36px)); padding: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(31 36 31 / 55%); backdrop-filter: blur(3px); }
dialog h2 { margin-bottom: 20px; font-size: 2rem; }
dialog p:not(.kicker) { color: #555b54; line-height: 1.65; }
.dialog-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; font-size: 1.7rem; cursor: pointer; }
.entity-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .84rem; }
.entity-facts dt { color: var(--muted); font-weight: 700; }
.entity-facts dd { margin: 0; }
.connections { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.connection { padding: 6px 9px; border-radius: 99px; background: #e4e1d7; color: #535a52; font-size: .72rem; }
.entity-source { margin-top: 18px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: .74rem; }

@media (max-width: 900px) {
  .workspace { display: block; }
  .context { position: static; height: auto; border-top: 1px solid var(--line); border-left: 0; }
  .icon-button { display: inline-flex; }
  .context.is-hidden { display: none; }
  .reader { padding-inline: clamp(22px, 7vw, 70px); }
  .text-minimap { left: 4px; width: 14px; padding-inline: 3px; }
}
@media (max-width: 620px) {
  .quiet-button { display: none; }
  .reader__heading-row { display: block; }
  .view-switch { margin-top: 24px; }
  .reader__meta { margin-bottom: 24px; }
  .journey-panel, .entities { padding-inline: 20px; }
}