:root {
  --color-page: #f4f0df;
  --color-surface: #173323;
  --color-surface-raised: #14251c;
  --color-map: #1d3023;
  --color-text: #17241b;
  --color-text-muted: #4b594d;
  --color-text-on-dark: #f4f0df;
  --color-text-muted-on-dark: #d7e3bf;
  --color-accent: #9fbd63;
  --color-accent-muted: #527447;
  --color-footer: #8b5e3c;
  --color-footer-text: #ffefd0;
  --color-border: rgba(23, 36, 27, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-text); background: var(--color-page); font-family: Manrope, sans-serif; }
a { color: inherit; }

.topbar { min-height: 72px; display: flex; justify-content: space-between; align-items: center; max-width: 1180px; margin: auto; padding: 16px 28px; }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; font: 700 21px Fraunces, serif; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; background: var(--color-surface); color: var(--color-accent); font-size: 20px; }
.nav { display: flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 700; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--color-accent-muted); }

.hero { position: relative; overflow: hidden; background: var(--color-surface); color: var(--color-text-on-dark); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: 0.3; background-image: linear-gradient(30deg, rgba(159, 189, 99, 0.13) 12%, transparent 12.5%, transparent 87%, rgba(159, 189, 99, 0.13) 87.5%), linear-gradient(150deg, rgba(159, 189, 99, 0.13) 12%, transparent 12.5%, transparent 87%, rgba(159, 189, 99, 0.13) 87.5%); background-size: 44px 76px; background-position: 0 0, 22px 38px; }
.hero-inner { position: relative; max-width: 1180px; margin: auto; padding: 100px 28px 124px; }
.eyebrow, .tag { color: var(--color-accent); font: 500 12px "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 12px 0 19px; font: 700 clamp(48px, 7vw, 88px) / 0.98 Fraunces, serif; }
.hero p { max-width: 550px; margin: 0; color: var(--color-text-muted-on-dark); font-size: 18px; line-height: 1.6; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 42px; }
.stat { border-left: 2px solid var(--color-accent); padding-left: 12px; }
.stat strong { display: block; font: 600 14px "DM Mono", monospace; }
.stat span, .map-heading p { color: var(--color-text-muted-on-dark); font-size: 12px; }

main { max-width: 1180px; margin: -52px auto 0; padding: 0 28px 72px; position: relative; }
.map-section { background: var(--color-surface-raised); border: 4px solid var(--color-page); box-shadow: 0 15px 0 var(--color-footer); }
.map-heading { min-height: 62px; padding: 15px 19px; display: flex; gap: 18px; justify-content: space-between; align-items: center; color: var(--color-text-on-dark); }
.map-heading h2 { margin: 0; font: 600 20px Fraunces, serif; }
.map-heading p { margin: 0; font-family: "DM Mono", monospace; }
#map { height: min(65vh, 660px); min-height: 390px; background: var(--color-map); }
.leaflet-control-attribution { font: 11px Manrope, sans-serif; }

.details { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0; margin-top: 94px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.detail { padding: 29px 28px 32px 0; border-right: 1px solid var(--color-border); }
.detail + .detail { padding-left: 28px; }
.detail:last-child { border-right: 0; }
.detail h2 { margin: 0 0 10px; font: 600 23px Fraunces, serif; }
.detail p { max-width: 275px; margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; }
.tag { display: inline-block; margin-bottom: 14px; color: var(--color-accent-muted); font-size: 11px; }

footer { background: var(--color-footer); color: var(--color-footer-text); }
.footer-inner { min-height: 92px; max-width: 1180px; margin: auto; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; }
.footer-inner strong { font: 600 14px Fraunces, serif; }

@media (max-width: 680px) {
  .topbar { padding: 15px 20px; }
  .nav { gap: 16px; }
  .nav a:first-child { display: none; }
  .hero-inner { padding: 76px 20px 92px; }
  .hero p { font-size: 16px; }
  main { margin-top: -34px; padding: 0 20px 52px; }
  .map-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  #map { min-height: 390px; height: 58vh; }
  .details { grid-template-columns: 1fr; margin-top: 68px; }
  .detail, .detail + .detail { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .detail:last-child { border-bottom: 0; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 5px; padding: 21px 20px; }
}