/* ============================================================
   Fredericksburg City Cemetery — Main Stylesheet
   ============================================================ */

/* Google Fonts loaded in header.php */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:   #2a4030;
  --green-mid:    #3d5c45;
  --gold:         #b8962e;
  --gold-light:   #d4af5a;
  --stone:        #7a6e5f;
  --cream:        #f5f0e8;
  --cream-dark:   #ece5d8;
  --text:         #2b2b2b;
  --text-light:   #5a5248;
  --white:        #ffffff;
  --border:       #cec3b2;
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
  --shadow:       0 4px 24px rgba(0,0,0,.15);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.10);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  background: var(--cream);
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--green-mid); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  line-height: 1.25;
  color: var(--green-dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol {
  padding-left: 1.4em;
  margin-bottom: 1.2em;
}
li { margin-bottom: .4em; }

/* ── Icons ── */
/* Inline SVG from includes/icons.php, replacing the emoji that used to sit in
   these slots. Sized in em so an icon follows the font-size of whatever it
   sits in, and stroked in currentColor so it takes that element's colour —
   neither of which an emoji could do, since those render in the platform's own
   colour font. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.card__icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--gold);
}

/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 72px 0;
}
.section--alt {
  background: var(--cream-dark);
}
.section--dark {
  background: var(--green-dark);
  color: var(--cream);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--gold-light);
}
.section--dark p,
.section--dark li {
  color: var(--cream);
}

.section__header {
  text-align: center;
  margin-bottom: 48px;
}
.section__header h2 {
  margin-bottom: 12px;
}
.section__divider {
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 20px;
  border: none;
}
.section__subtitle {
  font-size: 1rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* ── Navigation ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green-dark);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo__icon {
  width: 48px;
  height: 32px;
  flex-shrink: 0;
}

/* The gate glyph is painted with a CSS mask rather than an <img> so it stays a
   single cached file while still taking its colour from the palette. */
.footer-brand__mark {
  display: block;
  width: 66px;
  height: 44px;
  margin-bottom: 14px;
}
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .nav-logo__icon,
  .footer-brand__mark {
    background-color: var(--gold-light);
    -webkit-mask: url("/img/gate.svg") no-repeat center / contain;
            mask: url("/img/gate.svg") no-repeat center / contain;
  }
  .nav-logo:hover .nav-logo__icon { background-color: var(--white); }
}
/* Cinzel, not the body serif: it is a Trajan revival, the same inscriptional
   Roman family the drawn wordmark came from, and its lowercase glyphs are
   small caps — so the markup stays normal title case and still sets as caps.
   Sized to hold one line beside the menu down to the 1080px breakpoint. */
.nav-logo__text {
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--cream);
  line-height: 1.25;
}
.nav-logo__text span {
  display: block;
  font-size: .58rem;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: block;
  padding: 8px 12px;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  border-radius: 4px;
  transition: background .2s, color .2s;
  /* Without this the flex row squeezes items until labels break mid-phrase —
     "FIND / GRAVES" — rather than the row simply running out of width. */
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a.active {
  background: var(--green-mid);
  color: var(--gold-light);
}

/* Donate is the one thing the site asks of a visitor, so it reads as a button
   rather than another link in the row. */
.nav-cta a,
.nav-cta a.active {
  background: var(--gold);
  color: var(--green-dark);
  font-weight: 700;
}
.nav-cta a:hover {
  background: var(--gold-light);
  color: var(--green-dark);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--green-dark);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/img/cemetery-aerial.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: .38;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(30,50,35,.5) 0%, rgba(20,35,25,.85) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 2px;
}
.hero__title {
  color: var(--white);
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.hero__title em {
  font-style: italic;
  color: var(--gold-light);
}
.hero__desc {
  font-size: 1.1rem;
  color: rgba(245,240,232,.88);
  margin-bottom: 36px;
  line-height: 1.8;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 13px 30px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background .2s, color .2s, box-shadow .2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--gold);
  color: var(--green-dark);
  border-color: var(--gold);
}
.btn--primary:hover {
  background: var(--gold-light);
  color: var(--green-dark);
  box-shadow: 0 4px 16px rgba(184,150,46,.45);
}
.btn--outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn--outline:hover {
  background: var(--cream);
  color: var(--green-dark);
}
.btn--outline-dark {
  background: transparent;
  color: var(--green-dark);
  border-color: var(--green-dark);
}
.btn--outline-dark:hover {
  background: var(--green-dark);
  color: var(--cream);
}
.btn--gold-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn--gold-outline:hover {
  background: var(--gold);
  color: var(--green-dark);
}

/* ── Cards ── */
.cards {
  display: grid;
  gap: 28px;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.card__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.card__body {
  padding: 28px;
}
.card__body h3 {
  margin-bottom: 10px;
}
.card__body p {
  font-size: .95rem;
  color: var(--text-light);
}
.card__body .btn {
  margin-top: 18px;
}

/* ── Info Strip ── */
.info-strip {
  background: var(--green-mid);
  padding: 28px 0;
}
.info-strip__inner {
  display: flex;
  gap: 16px;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: center;
}
.info-item {
  color: var(--cream);
}
.info-item__icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--gold);
}
/* Lighter gold holds up better against the green strip. */
.info-strip .info-item__icon { color: var(--gold-light); }
.info-item__label {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.info-item__value {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
}

/* ── Two-Column Layout ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.two-col--rev { direction: rtl; }
.two-col--rev > * { direction: ltr; }

.two-col__img {
  border-radius: 6px;
  box-shadow: var(--shadow);
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* ── Feature Banner ── */
.feature-banner {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  background: var(--green-dark);
  overflow: hidden;
}
.feature-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .3;
}
.feature-banner__content {
  position: relative;
  z-index: 1;
}
.feature-banner h2 { color: var(--white); }
.feature-banner p  { color: rgba(245,240,232,.85); }

/* ── Page Hero (inner pages) ── */
.page-hero {
  background: var(--green-dark);
  padding: 64px 0 54px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--gold), var(--gold-light), var(--gold));
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .2;
}
.page-hero__content {
  position: relative;
  z-index: 1;
}
.page-hero h1 { color: var(--white); }
.page-hero .breadcrumb {
  font-size: .83rem;
  color: var(--gold-light);
  margin-bottom: 14px;
  letter-spacing: .05em;
}
.page-hero .breadcrumb a { color: var(--gold-light); }
.page-hero .breadcrumb a:hover { color: var(--white); }

/* ── Policy List ── */
.policy-group {
  margin-bottom: 44px;
}
.policy-group h3 {
  color: var(--green-dark);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.policy-group ol,
.policy-group ul {
  padding-left: 1.6em;
}
.policy-group li {
  margin-bottom: .7em;
  color: var(--text);
  font-size: .97rem;
}

/* ── Rates Table ── */
.rates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 840px;
  margin: 0 auto;
}

.rates-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.rates-table th {
  background: var(--green-dark);
  color: var(--cream);
  font-family: var(--font-serif);
  padding: 14px 20px;
  text-align: left;
  font-size: 1rem;
}
.rates-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.rates-table tr:last-child td { border-bottom: none; }
.rates-table tr:nth-child(even) td { background: var(--cream); }
.rates-table td:last-child { font-weight: 700; color: var(--green-dark); text-align: right; }

/* ── Contact ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
}
.contact-info h3 {
  margin-bottom: 20px;
}
.contact-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.contact-detail__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}
.contact-detail__text strong {
  display: block;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 3px;
}
.contact-detail__text a { color: var(--green-mid); }
.contact-detail__text a:hover { color: var(--gold); }

.contact-form {
  background: var(--white);
  padding: 40px;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.contact-form h3 { margin-bottom: 24px; }
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--text);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(61,92,69,.15);
}
.form-group textarea { resize: vertical; min-height: 130px; }

/* ── Map embed ── */
.map-wrap {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 36px;
  background: var(--cream-dark);
}
.map-canvas {
  width: 100%;
  height: 360px;
}

/* The link is server-rendered and stays put until the map actually paints, so
   a blocked CDN or a rejected token leaves something useful behind. */
.map-fallback {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: .92rem;
}
.map-wrap--ready .map-fallback { display: none; }

/* Gate glyph in a gold disc, matching the nav mark. */
.map-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.map-marker::after {
  content: "";
  width: 21px;
  height: 14px;
}
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .map-marker::after {
    background-color: var(--green-dark);
    -webkit-mask: url("/img/gate.svg") no-repeat center / contain;
            mask: url("/img/gate.svg") no-repeat center / contain;
  }
}
.mapboxgl-popup-content {
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.5;
  border-radius: 5px;
  padding: 12px 14px;
}
.mapboxgl-popup-content strong {
  font-family: var(--font-serif);
  color: var(--green-dark);
}

/* ── Donate ── */
.donate-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background: var(--green-dark);
  overflow: hidden;
}
.donate-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/img/cemetery-grounds.jpg');
  background-size: cover;
  background-position: center;
  opacity: .28;
}
.donate-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(30,50,35,.8) 40%, rgba(30,50,35,.3) 100%);
}
.donate-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.donate-hero h1 { color: var(--white); }
.donate-hero p { color: rgba(245,240,232,.9); }

.donate-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.donate-option {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 32px 24px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.donate-option:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
}
.donate-option__amount {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.donate-option p {
  font-size: .92rem;
  color: var(--text-light);
  margin-bottom: 20px;
}

/* ── Workshop / Gallery ── */
.workshop-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
.workshop-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.workshop-imgs img {
  border-radius: 4px;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.workshop-imgs img:first-child {
  grid-column: 1 / -1;
  height: 280px;
}

/* ── Interactive lot map ── */
.lotmap { display: grid; gap: 18px; }
.lotmap__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.lotmap__find { display: flex; align-items: center; gap: 9px; }
.lotmap__find > span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-light);
}
.lotmap__find input {
  width: 108px;
  padding: 8px 11px;
  font: inherit;
  font-size: .92rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.lotmap__find input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lotmap__help { margin: 0; font-size: .85rem; color: var(--text-light); flex: 1 1 240px; min-width: 0; }
.lotmap__dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--green-mid);
}
.lotmap__dl .icon { font-size: 1rem; }

/* The grid needs roughly 760px before the numbers stop being readable, so on a
   phone it scrolls sideways rather than shrinking into illegibility. */
.lotmap__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
}
/* Streets and roads are laid out as one connected surface rather than separate
   blocks, so the junctions carry information: Washington Avenue meets William
   Street at the corner, the side road runs north from the Confederate Gate, and
   the cross road turns west off it and stops. No gap between them — the lot
   grids carry their own inset instead. */
.lotmap__inner {
  --street: 30px;
  --sideroad: 46px;
  --crossroad: 26px;
  --avenue: 26px;
  /* Public roadway is the dark frame around the plat. The cemetery's own
     roads are a lighter surface so they sit inside the map rather than
     cutting across it, with dark ink to stay legible on that tone. */
  /* A shade deeper than --stone: cream on --stone measures 4.38:1, just under
     the 4.5:1 these label sizes need. */
  --street-fill: #6f6456;
  --street-ink: var(--cream);
  --road-fill: #c7bca8;
  --road-ink: var(--green-dark);
  min-width: 790px;
  display: grid;
  grid-template-columns: var(--street) minmax(0, 1fr) var(--sideroad);
  grid-template-rows: auto var(--crossroad) auto var(--avenue);
  gap: 0;
  position: relative;
}
.lotmap__grid { display: grid; gap: 3px; padding: 4px; }
.lotmap__grid--upper { grid-column: 2; grid-row: 1; }
.lotmap__grid--lower { grid-column: 2; grid-row: 3; }

.lotmap__street,
.lotmap__road {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lotmap__street { background: var(--street-fill); color: var(--street-ink); }
.lotmap__road   { background: var(--road-fill);   color: var(--road-ink); }
.lotmap__street--william {
  grid-column: 1;
  grid-row: 1 / 4;
  border-radius: 4px 0 0 0;
}
.lotmap__street--washington {
  grid-column: 1 / -1;
  grid-row: 4;
  border-radius: 0 0 4px 4px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* The cemetery's own roads are a separate object from the public street: they
   sit inside the walls and meet Washington Avenue only at the Confederate
   Gate, so they are detached from it rather than merged into one surface. */
.lotmap__road--side {
  grid-column: 3;
  grid-row: 1 / 4;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 4px;
  margin: 4px 4px 5px 0;
  padding: 8px 2px 0;
  overflow: hidden;
}
/* The cross road is not a through route: it stops short of William Street and
   its western end is rounded to show the dead end. */
/* Runs into the side road, so the two read as one network. Its western end is
   rounded on the same 4px as everything else on the map; that it stops short
   of William Street is what shows the dead end. */
.lotmap__road--cross {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 0 10px;
  border-radius: 4px 0 0 4px;
  position: relative;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The inside corner where the two public streets meet. A radial gradient
   centred on the cemetery side leaves that quarter clear and paints the rest
   in street colour, which is the one shape border-radius cannot make. Kept to
   the same 4px family as the lot and section blocks: a concave corner reads
   larger than a convex one at the same radius, so anything more looks carved. */
.lotmap__corner {
  position: absolute;
  left: var(--street);
  bottom: var(--avenue);
  width: 4px;
  height: 4px;
  background: radial-gradient(circle at 100% 0, transparent 4px, var(--street-fill) 4px);
  pointer-events: none;
}

/* Rotated so it reads bottom-to-top, the way a street name runs on a plan. */
.lotmap__vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
}
/* Labels take the ink of the surface they sit on, so neither has to be
   checked by eye when a colour changes. */
.lotmap__street .lotmap__vert { color: var(--street-ink); }
.lotmap__road .lotmap__vert { color: var(--road-ink); }
.lotmap__roadname { opacity: .85; }

.lotmap__across {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
}
/* The arrows stay horizontal: they point east, toward the Confederate
   Cemetery, rather than rotating with the label beside them. */
.lotmap__arrow {
  font-size: .85rem;
  line-height: 1;
  color: var(--road-ink);
}
.lotmap__across .lotmap__vert { font-weight: 700; }

/* The two gates are the same kind of thing, so they are labelled the same
   way. Pin last, so it sits at the foot of the column where the gate meets
   Washington Avenue. */
.lotmap__gate--confederate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 3px 9px;
  opacity: .92;
}
.lotmap__gate--confederate .lotmap__vert {
  font-size: .6rem;
  letter-spacing: .04em;
}
.lotmap__gate--confederate .icon { font-size: .85rem; }
.lotmap__gate--original {
  position: absolute;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .6rem;
  letter-spacing: .04em;
  opacity: .92;
}
.lotmap__gate--original .icon { font-size: .85rem; }

.lot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 2px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lot:hover { background: var(--gold-light); border-color: var(--gold); }
.lot:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 1px; z-index: 2; }
.lot.is-selected {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--cream);
}
/* A lot that carries a note gets a mark, so the church lots and the mausoleum
   are findable without opening each one. */
.lot__dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.lot.is-selected .lot__dot { background: var(--gold-light); }

.lotmap__head,
.lotmap__band,
.lotmap__struct {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 4px;
  text-align: center;
}
.lotmap__head { font-weight: 700; color: var(--green-dark); }
.lotmap__struct { font-size: .6rem; letter-spacing: .04em; }
.lotmap__band { position: relative; }
.lotmap__band--soldiers { background: var(--green-mid); color: var(--cream); border-color: var(--green-mid); }
.lotmap__band--road,
.lotmap__band--ave { background: var(--stone); color: var(--cream); border-color: var(--stone); }

/* A popover pinned over the lot that was clicked, rather than a column beside
   the map: a sidebar reflowed the grid and changed its proportions every time
   it opened. Fixed positioning keeps it out of the map's own scroll container,
   which would otherwise clip it. JS sets top/left and clamps both to the
   viewport. */
.lotmap__panel {
  position: fixed;
  z-index: 60;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .26);
}
/* Scrolling happens here, not on the shell. The caret is a child of the shell,
   and as a child of the scrolling box its overhang counted toward the scroll
   height — which is why every panel had a scrollbar with nothing below the
   content but the caret itself. */
.lotmap__panel-inner {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 44px 18px 20px;
  border-radius: inherit;
}
/* Caret pointing at the lot. Hidden when the panel has been flipped or
   clamped far enough that it would no longer line up. */
.lotmap__panel::after {
  content: "";
  position: absolute;
  left: var(--caret-x, 50%);
  width: 12px;
  height: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.lotmap__panel[data-side="above"]::after {
  bottom: -7px;
  border-top: none;
  border-left: none;
}
.lotmap__panel[data-side="below"]::after {
  top: -7px;
  border-bottom: none;
  border-right: none;
}
.lotmap__panel[data-caret="off"]::after { display: none; }
.lotmap__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-light);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.lotmap__close:hover { color: var(--text); background: var(--cream-dark); }
.lotmap__sec {
  margin: 0 0 2px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.lotmap__lot { margin: 0 0 8px; font-size: 1.45rem; }
.lotmap__note {
  margin: 0 0 10px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--green-mid);
}
.lotmap__body { margin: 0 0 14px; font-size: .92rem; line-height: 1.6; }
.lotmap__plot { font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.lotmap__go { display: inline-block; }
.lotmap__caveat { margin: 12px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-light); }

/* A dimmed backdrop on touch widths, where a popover floating over a map the
   visitor is already panning is easy to lose track of. */
.lotmap__scrim {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(26, 30, 24, .34);
}
@media (min-width: 700px) {
  .lotmap__scrim { display: none; }
}

/* ── Lot Map ── */
.lot-map-wrap {
  background: var(--white);
  border-radius: 6px;
  padding: 8px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.lot-map-wrap img {
  border-radius: 4px;
  width: 100%;
}
.lot-map-wrap figcaption {
  font-size: .85rem;
  color: var(--stone);
  padding: 12px 8px 6px;
  font-style: italic;
}

/* ── Callout Box ── */
.callout {
  background: var(--green-dark);
  color: var(--cream);
  border-left: 5px solid var(--gold);
  padding: 24px 28px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 28px;
}
.callout p { color: var(--cream); margin-bottom: 0; }
.callout strong { color: var(--gold-light); }

/* Both of these sit on the dark green, where a heading or a link keeps its
   default green and disappears. Only paragraphs were being recoloured. */
.callout h2,
.callout h3,
.callout h4 { color: var(--gold-light); }
.section--dark a:not(.btn),
.callout a:not(.btn) {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section--dark a:not(.btn):hover,
.callout a:not(.btn):hover { color: var(--white); }

/* ── Footer ── */
.site-footer {
  background: #141f18;
  color: rgba(245,240,232,.75);
  padding: 60px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand__logo {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--cream);
  margin-bottom: 12px;
}
.footer-brand__logo span {
  display: block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-family: var(--font-body);
}
.footer-brand p {
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(245,240,232,.65);
  margin-bottom: 16px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.08);
  color: var(--cream);
  border-radius: 50%;
  font-size: 1.05rem;
  transition: background .2s;
}
.footer-social a:hover { background: var(--gold); color: var(--green-dark); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: 9px; }
.footer-links a {
  color: rgba(245,240,232,.7);
  font-size: .9rem;
  transition: color .2s;
}
.footer-links a:hover { color: var(--cream); }

.footer-contact-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .9rem;
  color: rgba(245,240,232,.7);
}
.footer-contact-item span:first-child { color: var(--gold-light); flex-shrink: 0; font-size: 1.05rem; line-height: 1.4; }
.footer-contact-item a { color: rgba(245,240,232,.7); }
.footer-contact-item a:hover { color: var(--cream); }

.footer-bottom {
  padding: 20px 0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(245,240,232,.4);
}

/* ── Utility ── */
.text-center { text-align: center; }
.text-gold    { color: var(--gold) !important; }
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cards--3         { grid-template-columns: 1fr 1fr; }
  .footer-grid      { grid-template-columns: 1fr 1fr; }
  .donate-options   { grid-template-columns: 1fr 1fr; }
  .workshop-grid    { grid-template-columns: 1fr; }
}

/* The nav needs ~1050px for the logo and seven items on one line, so it
   collapses well before the 768px the rest of the layout uses. Keeping it in
   its own query means the menu is never squeezed into an unreadable row. */
@media (max-width: 1080px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--green-dark);
    padding: 12px 0 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { border-radius: 0; padding: 12px 24px; }
  .nav-cta a { display: inline-block; margin: 6px 24px; border-radius: 4px; }
  .nav-toggle { display: flex; }
  .site-header { position: relative; }
}

@media (max-width: 768px) {
  .section { padding: 52px 0; }

  .two-col         { grid-template-columns: 1fr; gap: 32px; }
  .two-col--rev    { direction: ltr; }
  .two-col__img    { height: 280px; }
  .cards--3        { grid-template-columns: 1fr; }
  .cards--2        { grid-template-columns: 1fr; }
  .contact-grid    { grid-template-columns: 1fr; gap: 36px; }
  .donate-options  { grid-template-columns: 1fr; }
  .workshop-imgs img:first-child { height: 200px; }
  .workshop-imgs img { height: 160px; }
  .rates-grid      { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr; gap: 32px; }
  .hero { min-height: 70vh; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { text-align: center; }
  .contact-form { padding: 24px 20px; }
  .info-strip__inner { gap: 28px; }
  .rates-table th,
  .rates-table td { padding: 10px 12px; font-size: .88rem; }
}

.lotmap__loose {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-light);
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 3px 3px 0;
}
.lotmap__loose strong { color: var(--green-dark); }

/* Soldier's Row is a control, not a label: reset the button chrome and keep
   the band's own styling. */
.lotmap__rowbtn {
  font: inherit;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--green-mid);
  cursor: pointer;
  width: 100%;
  transition: background .15s;
}
.lotmap__rowbtn:hover { background: var(--green-dark); }
.lotmap__rowbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; z-index: 2; }
.lotmap__rowbtn.is-selected { background: var(--green-dark); box-shadow: inset 0 0 0 1px var(--gold-light); }