:root {
  --bg: #ece8e1;
  --bg-soft: #f5f1ea;
  --card: rgba(255,255,255,0.68);
  --text: #2d2721;
  --muted: #6a6258;
  --line: #c6baa7;
  --accent: #7d5a31;
  --accent-soft: #a9834f;
  --shadow: 0 18px 40px rgba(36, 28, 19, 0.10);
  --radius: 18px;
  --maxw: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--text);
  background: linear-gradient(180deg, #efebe4 0%, #e8e2d8 100%);
  line-height: 1.65;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #694a26; }
img { max-width: 100%; height: auto; display: block; }
.container { width: min(var(--maxw), calc(100% - 2rem)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(8px);
  background: rgba(239, 235, 228, 0.88);
  border-bottom: 1px solid rgba(138, 101, 57, 0.18);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0;
}
.brand { text-decoration: none; color: var(--text); }
.brand .kicker { display:block; font-size: 0.76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.brand .title { display:block; font-size: 1.28rem; letter-spacing: .04em; }
.nav { display:flex; gap: .9rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  text-decoration: none; color: var(--text); font-size: .98rem; padding: .3rem .55rem; border-radius: 999px;
}
.nav a:hover, .nav a[aria-current="page"] { background: rgba(125,90,49,.10); color: var(--accent); }
.page-hero { padding: 3rem 0 2rem; }
.hero-grid {
  display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 2rem; align-items: center;
}
.hero-copy h1, .section-heading h1, .page-title {
  font-size: clamp(2.2rem, 3vw + 1rem, 4.4rem);
  line-height: 1.04; margin: 0 0 1rem;
  font-weight: normal; letter-spacing: .01em;
}
.subtitle { font-size: clamp(1.12rem, 1.4vw + .6rem, 1.7rem); font-style: italic; color: var(--muted); margin-bottom: 1.2rem; }
.kicker { font-size: .84rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 1.1rem; color: #3b342d; }
.hero-actions, .button-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1.35rem; }
.button, .button-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.15rem; border-radius:999px; text-decoration:none; border:1px solid transparent; font-size:.98rem;
}
.button { background: var(--accent); color:#fff; box-shadow: var(--shadow); }
.button:hover { background:#72512f; color:#fff; }
.button-secondary { background: transparent; border-color: rgba(125,90,49,.35); color:var(--text); }
.button-secondary:hover { background: rgba(125,90,49,.08); }
.card {
  background: var(--card); border:1px solid rgba(198,186,167,.7); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-card { padding: 1.5rem; }
.hero-card img { border-radius: 14px; box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.section { padding: 2rem 0 0.5rem; }
.section .intro { max-width: 720px; color: var(--muted); }
.features { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1.25rem; }
.feature { padding:1.15rem 1.2rem; }
.feature h3 { margin:.2rem 0 .45rem; font-size:1.16rem; font-weight: normal; }
.quote-box { padding: 1.4rem 1.5rem; font-size:1.06rem; }
.split-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; align-items: start; }
.map-panel { padding:1rem; }
.small-title { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.quick-list { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.65rem 1.4rem; list-style:none; padding:0; margin:1rem 0 0; }
.quick-list li { margin:0; }
.quick-list a { text-decoration:none; color:var(--text); }
.quick-list a:hover { color: var(--accent); }
.quick-list .n {
  display:inline-flex; width:1.6rem; height:1.6rem; border-radius:50%; align-items:center; justify-content:center;
  border:1px solid rgba(45,39,33,.4); margin-right:.5rem; font-size:.88rem; background: rgba(255,255,255,.55);
}
.map-wrapper {
  position: relative; border-radius: 18px; overflow:hidden; border:1px solid rgba(45,39,33,.18); background:#e9e4db;
}
.map-hotspots { position:absolute; inset:0; }
.map-pin {
  position:absolute; width:42px; height:42px; border-radius:50%; transform: translate(-50%, -50%);
  background: rgba(125,90,49,.02); border: 2px solid rgba(125,90,49,.0); text-indent:-9999px; overflow:hidden;
}
.map-pin:hover, .map-pin:focus-visible, .map-pin.active {
  border-color: rgba(125,90,49,.95); box-shadow: 0 0 0 7px rgba(125,90,49,.20); outline:none;
}
.map-info { margin-top: 1rem; padding: 1rem 1.1rem; min-height: 9rem; }
.map-info h3 { margin:.15rem 0 .25rem; font-size: 1.35rem; font-weight: normal; }
.map-info p { margin:.35rem 0; }
.location-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; margin-top:1.1rem; }
.location-card { padding: 1.05rem 1.1rem; scroll-margin-top: 6rem; }
.location-card h3 { margin:0 0 .25rem; font-size:1.2rem; font-weight: normal; }
.location-card .meta { color: var(--muted); font-size:.96rem; }
.location-card .actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.85rem; }
.location-card.active { outline: 2px solid rgba(125,90,49,.55); background: rgba(255,255,255,.78); }
.muted { color: var(--muted); }
.poster-box { padding: 1.1rem; }
.poster-box img { border-radius: 14px; box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.note { font-size: .95rem; color: var(--muted); }
.site-footer {
  margin-top: 3rem; padding: 2rem 0 3rem; border-top: 1px solid rgba(125,90,49,.18);
  color: var(--muted); font-size:.95rem;
}
.footer-grid { display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:start; }
.hero-copy .button + .button-secondary { margin-left: .25rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page-banner { padding: 2.6rem 0 1.4rem; }
.page-banner .page-title { margin-bottom: .8rem; }
.breadcrumbs { color: var(--muted); font-size: .95rem; margin-bottom: .7rem; }
.breadcrumbs a { color: var(--muted); }
.callout { padding: 1rem 1.1rem; border-left: 4px solid var(--accent-soft); background: rgba(255,255,255,.56); border-radius: 12px; }
.book-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.book-grid .card { padding:1.2rem; }
.book-grid h3 { margin:.1rem 0 .4rem; font-weight:normal; }
.cover-full { border-radius: 16px; box-shadow: var(--shadow); }
.chapters-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:.85rem; margin-top:1rem; }
.chapter-teaser { padding:.95rem 1rem; }
.chapter-teaser h3 { margin:0 0 .25rem; font-size:1.08rem; font-weight: normal; }
.chapter-teaser p { margin:0; color: var(--muted); font-size:.96rem; }
@media (max-width: 980px) {
  .hero-grid, .split-grid, .book-grid, .footer-grid { grid-template-columns: 1fr; }
  .features, .location-grid, .chapters-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .site-header .inner { flex-direction: column; align-items: flex-start; }
  .nav { justify-content:flex-start; }
  .hero-grid, .book-grid, .split-grid, .features, .location-grid, .chapters-grid, .quick-list { grid-template-columns: 1fr; }
  .page-hero { padding-top: 2rem; }
  .map-pin { width: 38px; height: 38px; }
  .hero-card { max-width: 390px; }
}

/* ---- additions ------------------------------------------------------- */

/* Sticky-header clearance for every scroll target, so "Show on map" lands
   on the map and not underneath the navigation bar. */
#top, #main, .location-card, [id^="grave-"] { scroll-margin-top: 5.5rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1rem; border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* Replaces the former inline style="font-size:2.2rem" / margin-top:1rem */
.section-title { font-size: 2.2rem; }
.small-heading { font-size: 1.1rem; font-weight: normal; margin: .1rem 0 .5rem; }
.mt-1 { margin-top: 1rem; }

/* Selected stop in the name lists */
.quick-list a.active { color: var(--accent); }
.quick-list a.active .n {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* Keyboard focus must be visible on the otherwise transparent map circles */
.map-pin:focus-visible { outline: 3px solid #2d2721; outline-offset: 2px; }

.map-info:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
picture { display: block; }

.footer-legal {
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(125,90,49,.16);
}
.footer-legal p { margin: 0; font-size: .88rem; color: var(--muted); }

.map-credit {
  margin: .7rem .25rem .1rem; font-size: .82rem; line-height: 1.5; color: var(--muted);
}
.map-credit a { color: var(--muted); }

/* ---- map zoom -------------------------------------------------------- */

.map-stage {
  transform-origin: 0 0;
  transform: translate(0px, 0px) scale(1);
  will-change: transform;
}
.map-wrapper.zoomed { cursor: grab; touch-action: none; }
.map-wrapper.zoomed.dragging { cursor: grabbing; }
.map-wrapper.zoomed .map-stage { transition: none; }
.map-stage.animate { transition: transform .22s ease-out; }

/* Pins counter-scale so the tap target stays the same size on screen while
   the graves themselves spread apart. */
.map-pin { transform: translate(-50%, -50%) scale(var(--pin-inv, 1)); }

.map-zoom {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 5;
  display: flex; gap: .35rem; align-items: center;
}
.map-zoom button {
  font: inherit; font-size: 1.15rem; line-height: 1;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border-radius: 999px; border: 1px solid rgba(45,39,33,.28);
  background: rgba(255,255,255,.92); color: var(--text);
  box-shadow: 0 3px 10px rgba(36,28,19,.16); cursor: pointer;
}
.map-zoom button.reset { width: auto; padding: 0 .8rem; font-size: .86rem; }
.map-zoom button:hover:not(:disabled) { background: #fff; color: var(--accent); }
.map-zoom button:disabled { opacity: .4; cursor: default; }
.map-zoom button:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

.legal-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
.legal-card { padding:1.15rem 1.25rem; }
.legal-card h2, .legal-card h3 { margin:.1rem 0 .5rem; font-size:1.16rem; font-weight:normal; }
.legal-card p { margin:.4rem 0; }
@media (max-width: 760px) { .legal-grid { grid-template-columns: 1fr; } }

/* ---- printable poster ------------------------------------------------
   The poster carries the same artwork as the interactive map, so it reads as
   a control and invites taps. Label it as print, and make a tap do the useful
   thing: open the real map. ------------------------------------------- */

.poster-box { margin: 0; padding: 1.1rem; }
.poster-link {
  position: relative; display: block; border-radius: 14px; overflow: hidden;
  text-decoration: none;
}
.poster-link img { border-radius: 14px; box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.poster-badge, .poster-cta {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px; white-space: nowrap;
}
.poster-badge {
  top: .7rem; background: rgba(45,39,33,.82); color: #f5f1ea;
}
.poster-cta {
  bottom: .7rem; text-transform: none; letter-spacing: .02em; font-size: .9rem;
  background: rgba(255,255,255,.94); color: var(--accent);
  border: 1px solid rgba(125,90,49,.35); box-shadow: 0 3px 12px rgba(36,28,19,.18);
}
.poster-link:hover .poster-cta, .poster-link:focus-visible .poster-cta {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.poster-link:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.poster-caption { margin: 1rem .25rem 0; }
.poster-caption p { margin: .3rem 0; font-size: .95rem; color: var(--muted); }
.poster-caption .button-row { margin-top: .8rem; }