:root {
  --green-deep: #2f4d34;
  --green-mid: #3f6b46;
  --green-bright: #4a8f52;
  --cream: #f6efdd;
  --cream-dark: #ece0c4;
  --barn-red: #a33d2c;
  --gray-muted: #8a8a80;
  --ink: #2a2620;
  --radius: 10px;
  --shadow: 0 4px 14px rgba(42, 38, 32, 0.18);
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, .brand {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--green-deep);
  color: var(--cream);
}
.brand { color: var(--cream); text-decoration: none; font-size: 1.4rem; font-weight: 700; }
.brand span { color: #c9e0c4; }
.site-nav a {
  color: var(--cream);
  text-decoration: none;
  margin-left: 1.25rem;
  font-size: 0.95rem;
  opacity: 0.85;
}
.site-nav a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Intro ---------- */
.explorer { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
.explorer-intro h1 { margin: 0 0 0.25rem; font-size: 1.9rem; color: var(--green-deep); }
.explorer-intro p { margin: 0 0 1rem; max-width: 60ch; color: #5a5548; }

.filters, .view-toggle {
  display: inline-flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  margin-right: 1rem;
}
.filter-btn, .view-btn {
  border: 1px solid var(--green-mid);
  background: transparent;
  color: var(--green-deep);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-btn.is-active, .view-btn.is-active {
  background: var(--green-mid);
  color: var(--cream);
}
.view-toggle { display: inline-flex; }

/* ---------- Layout ---------- */
.explorer-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.map-panel, .list-panel { display: none; }
.map-panel[data-active="true"], .list-panel[data-active="true"] { display: block; }

@media (min-width: 1024px) {
  .explorer-body { grid-template-columns: 2.1fr 1fr; align-items: start; }
  .map-panel, .list-panel { display: block; }
  .view-toggle { display: none; }
  .list-panel .property-list { max-height: 620px; overflow-y: auto; padding-right: 4px; }
}

/* ---------- Map ----------
   The source art is a tall 2048x3072 portrait covering the whole town, but
   markers/percentages are computed against that FULL image. .map-inner is
   always rendered at its natural full-image size (width:100%, height:auto)
   so marker percentages stay correct; .map-viewport just crops/scrolls a
   window over it via aspect-ratio + transform, never via object-fit, which
   would desync the crop from the percentage math. */
.map-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--cream-dark);
  aspect-ratio: 2048 / 1300; /* default: cropped to the South Neighborhood */
}
.map-viewport[data-crop="full"] { aspect-ratio: 2048 / 3072; }

.map-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-58%);
  transition: transform 0.4s ease;
}
.map-viewport[data-crop="full"] .map-inner { transform: translateY(0); }

.map-inner img {
  width: 100%;
  height: auto;
  display: block;
}

.map-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.map-controls button {
  border: none;
  background: none;
  color: var(--green-deep);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem 0;
}

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.marker .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--green-mid);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: transform 0.15s ease;
}
.marker .icon {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 6px) scale(0.6);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
  width: 34px;
  height: 34px;
  pointer-events: none;
}
.marker:hover .icon,
.marker:focus-visible .icon,
.marker.is-active .icon {
  opacity: 1;
  transform: translate(-50%, -4px) scale(1);
}
.marker:hover .dot,
.marker:focus-visible .dot,
.marker.is-active .dot {
  transform: scale(1.25);
}
.marker[data-status="coming_soon"] .dot,
.marker[data-status="unavailable"] .dot {
  border-color: var(--gray-muted);
}
.marker[data-status="pending"] .dot { border-color: #b98a2f; }
.marker[data-status="sold"] .dot { border-color: var(--barn-red); }
.marker:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; border-radius: 50%; }

/* ---------- Cards / list ---------- */
.property-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.property-card {
  border: 1px solid var(--cream-dark);
  background: #fffdf6;
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.property-card:hover, .property-card:focus-visible, .property-card.is-active {
  border-color: var(--green-mid);
  box-shadow: 0 2px 10px rgba(47,77,52,0.18);
}
.property-card h3 { margin: 0 0 0.15rem; font-size: 1rem; color: var(--green-deep); }
.property-card .status { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.status.available { color: var(--green-bright); }
.status.pending { color: #8a6519; }
.status.sold { color: var(--barn-red); }
.status.coming_soon, .status.unavailable { color: var(--gray-muted); }

/* ---------- Popup ---------- */
.popup {
  position: fixed;
  z-index: 40;
  max-width: 280px;
  background: #fffdf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--cream-dark);
  padding: 0.9rem 1rem;
}
.popup[hidden] { display: none; }
.popup-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--gray-muted);
}
.popup-body h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--green-deep); }
.popup-body .status { display: inline-block; margin-bottom: 0.4rem; }
.popup-body .note { color: #6b6555; font-size: 0.85rem; }
.popup-body a.cta {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--green-mid);
  color: var(--cream);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.site-footer {
  text-align: center;
  color: #7a7364;
  font-size: 0.8rem;
  padding: 1.5rem;
}

/* NEO-BRUTALIST REDESIGN */
:root { --ink:#20281e; --cream:#f6efdd; --green-deep:#294d37; --green-mid:#345d3c; --green-bright:#4a8f52; --mint:#d1e3ba; --yellow:#edc856; --radius:0; --shadow:5px 5px 0 var(--ink); }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { font-family:Arial,Helvetica,sans-serif; line-height:1.5; }
h1,h2,h3,.brand { font-family:Arial,Helvetica,sans-serif; letter-spacing:-.05em; line-height:1.02; }
a { color:inherit; text-underline-offset:4px; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,.property-card:focus-visible { outline:3px solid #a33d2c; outline-offset:4px; }
.skip-link { position:absolute; top:-70px; z-index:100; background:var(--yellow); padding:12px; }.skip-link:focus { top:0; }
.topline { display:flex; justify-content:space-between; background:var(--ink); color:var(--cream); padding:9px 4%; font:700 10px/1.4 'Courier New',monospace; letter-spacing:.13em; }
.site-header { padding:24px 4%; color:var(--ink); background:var(--cream); border-bottom:3px solid var(--ink); gap:24px; }
.brand { display:inline-flex; align-items:center; font-size:30px; font-weight:900; color:var(--ink); white-space:nowrap; }
.brand span { color:var(--green-mid); }.brand .brand-mark { background:var(--green-mid); color:var(--cream); border:2px solid var(--ink); margin-right:10px; font-size:26px; padding:0 8px; box-shadow:3px 3px 0 var(--ink); }.brand .brand-period { color:#a33d2c; }
.site-nav { display:flex; gap:26px; align-items:center; }.site-nav a { color:var(--ink); opacity:1; margin:0; font-size:13px; font-weight:700; }.site-nav .nav-contact { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:10px 16px; background:var(--yellow); }
.hero { display:grid; grid-template-columns:1fr 220px; gap:50px; max-width:1440px; margin:auto; padding:42px 4% 38px; align-items:center; }
.eyebrow { font:700 10px/1.5 'Courier New',monospace; letter-spacing:.12em; margin:0 0 18px; }.tiny-square { display:inline-block; width:8px; height:8px; background:var(--green-mid); margin-right:8px; }
.hero h1 { font-size:clamp(40px,5.5vw,78px); font-weight:900; margin:0 0 22px; line-height:.98; letter-spacing:-.065em; }.hero h1>span { color:var(--green-mid); }
.hero-bottom { display:flex; align-items:center; gap:35px; }.hero-bottom p { margin:0; font-size:14px; max-width:400px; }
.button { display:inline-flex; justify-content:space-between; gap:24px; align-items:center; text-decoration:none; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:13px 18px; font-size:11px; font-weight:800; letter-spacing:.035em; white-space:nowrap; transition:transform .15s,box-shadow .15s; }.button.green { background:var(--green-mid); color:var(--cream); }.button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }.button span { font-size:20px; }
.hero-stamp { background:var(--yellow); text-decoration:none; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); transform:rotate(4deg); padding:23px 18px; display:grid; gap:18px; text-align:center; }.hero-stamp strong { font-size:29px; font-weight:900; letter-spacing:-.055em; line-height:1; }.hero-stamp span { font:700 9px/1.4 'Courier New',monospace; letter-spacing:.05em; }
.explorer { max-width:1440px; padding:24px 4% 45px; }.section-title { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.section-title .eyebrow { margin-bottom:9px; }.section-title h2 { font-size:36px; margin:0; }.section-title>p { font-size:12px; margin:0; }
.explorer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; }.filters { flex-wrap:wrap; gap:7px; margin:0; }.filter-btn,.view-btn { border:2px solid var(--ink); border-radius:0; background:var(--cream); color:var(--ink); font-weight:700; font-size:11px; padding:9px 14px; min-height:38px; }.filter-btn.is-active,.view-btn.is-active { color:var(--cream); background:var(--ink); box-shadow:3px 3px 0 #81916c; }.map-hint { font:700 9px 'Courier New',monospace; }.explorer-intro #listingNotice { max-width:none; font-size:11px; color:#484c40; margin:14px 0; padding-left:10px; border-left:3px solid #9f442d; }
.explorer-body { gap:22px; }.map-panel,.list-panel { min-width:0; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:#fff9e9; }.panel-heading { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:2px solid var(--ink); font:700 10px 'Courier New',monospace; background:var(--mint); letter-spacing:.055em; }.map-viewport { box-shadow:none; border-radius:0; }.map-controls { margin:0; padding:10px 14px; border-top:2px solid var(--ink); background:var(--cream); }.map-controls button { color:var(--ink); font:700 10px 'Courier New',monospace; padding:4px; }.map-inner { transition:transform .25s ease; }.property-list { gap:0; }.property-card { border:0; border-bottom:2px solid var(--ink); border-radius:0; padding:15px 16px; background:#fff9e9; }.property-card:last-child { border-bottom:0; }.property-card h3 { color:var(--ink); font-size:16px; letter-spacing:-.02em; margin:0 0 6px; }.property-card .status { font:700 9px/1.4 'Courier New',monospace; }.status.unavailable,.status.coming_soon { color:#5b6053; }.property-card:hover,.property-card:focus-visible,.property-card.is-active { background:var(--mint); box-shadow:inset 5px 0 0 var(--green-mid); border-color:var(--ink); }.marker .dot { box-shadow:1px 1px 0 var(--ink); }.map-footnote { display:flex; justify-content:space-between; gap:12px; font:700 9px/1.5 'Courier New',monospace; padding-top:17px; }
.ribbon { background:var(--green-deep); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); color:var(--cream); padding:20px 4%; font-size:clamp(13px,2.1vw,29px); font-weight:900; letter-spacing:-.02em; display:flex; justify-content:space-between; align-items:center; gap:12px; }.ribbon span { color:var(--yellow); font-size:1.4em; }
.life-section { padding:65px 4%; max-width:1440px; margin:auto; }.life-title { display:grid; grid-template-columns:1.2fr 1fr; column-gap:60px; }.life-title .eyebrow { grid-column:1/-1; }.life-title h2 { margin:0; font-size:48px; grid-row:2/4; }.life-title h2 em { color:var(--green-mid); font-style:normal; }.life-title p:not(.eyebrow) { max-width:480px; margin:0 0 20px; font-size:14px; }.text-link { font-size:10px; font-weight:800; letter-spacing:.04em; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }.feature-card { padding:25px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); display:flex; flex-direction:column; align-items:start; }.feature-card.mint { background:var(--mint); }.feature-card.yellow { background:var(--yellow); }.feature-number { font:700 10px 'Courier New',monospace; border:2px solid var(--ink); padding:5px 8px; margin-bottom:24px; }.feature-card h3 { margin:0 0 16px; font-size:30px; }.feature-card p { font-size:13px; margin:0 0 26px; max-width:290px; }.feature-card a { font-size:10px; font-weight:800; margin-top:auto; }
.resources-section { border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--mint); padding:50px 4%; display:grid; grid-template-columns:1fr 1.25fr; gap:65px; }.resources-section h2 { margin:0 0 15px; font-size:45px; }.resources-section p:not(.eyebrow) { font-size:13px; }.resource-list { border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--cream); }.resource-list>a { display:flex; justify-content:space-between; align-items:center; text-decoration:none; padding:20px 24px; border-bottom:2px solid var(--ink); font-weight:800; font-size:21px; }.resource-list>a:last-child { border-bottom:0; }.resource-list>a:hover { background:var(--yellow); }.resource-list small { display:block; font:700 9px 'Courier New',monospace; margin-bottom:4px; }.resource-list b { font-size:28px; }
.contact-section { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; padding:65px 4%; max-width:1440px; margin:auto; align-items:center; }.contact-section h2 { font-size:clamp(40px,5vw,72px); margin:0 0 22px; font-weight:900; }.contact-section h2 span { color:#a33d2c; }.contact-section p { font-size:14px; }.contact-card { padding:30px; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:#fff9e9; display:flex; flex-direction:column; align-items:start; }.contact-tag { font:700 9px 'Courier New',monospace; background:var(--yellow); border:2px solid var(--ink); padding:6px 9px; margin-bottom:23px; }.contact-card h3 { font-size:30px; margin:0; }.contact-card p { margin:6px 0 20px; font-size:12px; }.contact-card .phone { font-size:26px; font-weight:800; text-decoration:none; }.contact-card .email { font-size:12px; margin:8px 0 25px; overflow-wrap:anywhere; }.contact-card .button { width:100%; margin-bottom:20px; }
.popup { border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); border-radius:0; padding:24px 18px 18px; width:280px; max-width:calc(100vw - 20px); }.popup-close { color:var(--ink); font-size:23px; }.popup-body a.cta { border:2px solid var(--ink); border-radius:0; box-shadow:3px 3px 0 var(--ink); }.site-footer { background:var(--ink); color:var(--cream); display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; text-align:left; padding:28px 4%; align-items:center; }.site-footer .brand { color:var(--cream); font-size:23px; }.site-footer .brand span { color:var(--mint); }.site-footer>p { font-size:11px; }.site-footer>a:not(.brand) { font:700 9px 'Courier New',monospace; }.footer-note { width:100%; border-top:1px solid #66715c; padding-top:18px; color:#c6cbbf; margin-bottom:0; }
@media(min-width:1024px) { .explorer-body { grid-template-columns:minmax(0,2.7fr) minmax(250px,1fr); }.list-panel .property-list { max-height:390px; overflow-y:auto; padding:0; }.view-toggle { display:none; } }
@media(min-width:1400px) { .list-panel .property-list { max-height:470px; } }
@media(max-width:1023px) { .site-nav { gap:16px; }.site-nav a { font-size:11px; }.hero { grid-template-columns:1fr 170px; gap:25px; }.hero-stamp strong { font-size:23px; }.hero-bottom { flex-wrap:wrap; gap:18px; }.map-hint { display:none; }.view-toggle { display:flex; margin-top:15px; }.life-title h2 { font-size:38px; }.feature-card { padding:18px; }.feature-card h3 { font-size:25px; }.contact-section { gap:30px; }.contact-card { padding:23px; } }
@media(max-width:650px) { .topline { font-size:8px; }.topline span:first-child { max-width:160px; }.site-header { flex-wrap:wrap; padding:18px 5%; gap:18px; }.brand { font-size:25px; }.site-nav { width:100%; gap:14px; justify-content:space-between; }.site-nav .nav-contact { padding:7px 9px; }.site-nav a { font-size:10px; }.hero { grid-template-columns:1fr; padding:30px 5%; }.hero h1 { font-size:clamp(35px,9vw,56px); }.hero-stamp { display:none; }.hero-bottom p { font-size:13px; }.hero-bottom .button { padding:10px 15px; }.explorer { padding:15px 5% 30px; }.section-title h2 { font-size:29px; }.section-title>p { display:none; }.filter-btn { padding:8px 10px; font-size:10px; }.map-footnote { flex-direction:column; font-size:8px; }.map-viewport { aspect-ratio:1050/1300; }.map-inner { width:195%; left:-28%; }.map-viewport[data-crop="full"] .map-inner { width:100%; left:0; }.ribbon { flex-wrap:wrap; justify-content:center; padding:16px; font-size:13px; }.ribbon span { font-size:16px; }.life-section { padding:38px 5%; }.life-title { display:block; }.life-title h2 { font-size:37px; margin-bottom:22px; }.feature-grid { grid-template-columns:1fr; gap:20px; }.feature-card { padding:25px; }.feature-card h3 { font-size:30px; }.feature-number { margin-bottom:20px; }.resources-section { grid-template-columns:1fr; gap:20px; padding:38px 5%; }.resources-section h2 { font-size:38px; }.resource-list>a { padding:18px; font-size:19px; }.contact-section { grid-template-columns:1fr; padding:40px 5%; gap:20px; }.contact-section h2 { font-size:48px; }.contact-card .phone { font-size:25px; }.site-footer { padding:25px 5%; }.panel-heading { padding:11px 9px; font-size:9px; } }
.covenants-card { margin-top:28px; padding:22px 24px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--cream); max-width:420px; }
.covenants-card h3 { margin:16px 0 10px; font-size:24px; }
.covenants-card > p { margin:0 0 18px; font-size:13px; }
.covenants-downloads { display:flex; flex-wrap:wrap; gap:10px; }
.covenants-downloads .button { padding:10px 14px; font-size:10px; }
.covenants-downloads .button:not(.green) { background:var(--cream); color:var(--ink); }

.contact-form { display:grid; gap:14px; margin-top:26px; max-width:400px; }
.contact-form label { display:grid; gap:6px; font:700 10px 'Courier New',monospace; letter-spacing:.05em; color:var(--ink); }
.contact-form input,.contact-form textarea { font:15px/1.4 Arial,Helvetica,sans-serif; padding:11px 12px; border:2px solid var(--ink); border-radius:0; background:#fff9e9; color:var(--ink); }
.contact-form input:focus-visible,.contact-form textarea:focus-visible { outline:3px solid #a33d2c; outline-offset:2px; }
.contact-form button { justify-content:center; width:fit-content; }

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

/* Address readability: magnify the neighborhood, keep printed labels unobstructed. */
.map-viewport[data-crop="south"] { aspect-ratio:1050 / 1300; }
.map-viewport[data-crop="south"] .map-inner { width:195%; left:-28%; }
.map-viewport[data-crop="full"] .map-inner { width:100%; left:0; }
.marker { width:32px; height:26px; background:transparent; z-index:1; }
.marker .dot { width:100%; height:100%; background:transparent!important; border:0; border-radius:3px; box-shadow:none; }
.marker:hover .dot,.marker:focus-visible .dot,.marker.is-active .dot { transform:none; background:transparent!important; outline:2px solid #345d3c; outline-offset:3px; }
.marker:hover,.marker:focus-visible,.marker.is-active { z-index:3; }
.marker .icon { left:calc(100% + 9px); bottom:0; transform:translate(0,0) scale(.8); }
.marker:hover .icon,.marker:focus-visible .icon,.marker.is-active .icon { transform:translate(0,0) scale(1); }
.marker:focus-visible { border-radius:3px; outline:3px solid #a33d2c; }
@media(min-width:1024px) { .list-panel { position:sticky; top:20px; }.list-panel .property-list { max-height:70vh; } }

.map-legend { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:12px 0 0; font:700 11px 'Courier New',monospace; }
.map-legend li { display:flex; align-items:center; gap:7px; }
.map-legend i { width:14px; height:14px; border:2px solid #fffdf6; outline:2px solid var(--ink); border-radius:2px; display:inline-block; }
/* Visible status dot on every map label (matches .map-legend) */
.marker::after { content:""; position:absolute; top:-8px; right:-11px; width:12px; height:12px; border-radius:50%; border:2px solid #fffdf6; background:#4a8f52; box-shadow:0 0 0 1px #1d2a1f; pointer-events:none; }
.marker[data-status="pending"]::after { background:#b98a2f; }
.marker[data-status="sold"]::after { background:#a33d2c; }
.marker[data-status="coming_soon"]::after, .marker[data-status="unavailable"]::after { background:#8a8a80; }
/* Phone: smaller status dots so they don't cover the address numbers; popup becomes a bottom sheet */
@media(max-width:650px) {
  .marker::after { width:8px; height:8px; top:-5px; right:-7px; border-width:1.5px; }
  .popup { position:fixed!important; left:10px!important; right:10px!important; top:auto!important; bottom:10px!important; width:auto; max-height:70vh; overflow-y:auto; z-index:50; }
  .popup-body { font-size:.95rem; }
}
/* Shanna's lot map preview (hero) */
.plat-preview { display:flex; align-items:center; gap:12px; background:var(--cream,#fffdf6); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:6px 12px 6px 6px; cursor:pointer; font:700 11px 'Courier New',monospace; color:var(--ink); text-align:left; }
.plat-preview img { width:52px; height:68px; object-fit:cover; object-position:top; border:1px solid var(--ink); }
.plat-preview small { display:block; margin-top:4px; font-weight:400; font-size:9px; }
.plat-preview:hover { transform:translate(-1px,-1px); }
.plat-dialog { max-width:min(92vw,720px); max-height:92vh; padding:12px; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:#fffdf6; overflow:auto; }
.plat-dialog::backdrop { background:rgba(20,28,22,.7); }
.plat-dialog img { max-width:100%; max-height:78vh; width:auto; height:auto; display:block; margin:0 auto; }
.plat-dialog p { font-size:12px; margin:10px 0 0; }
.plat-close { position:absolute; top:6px; right:10px; font-size:26px; background:#fffdf6; border:2px solid var(--ink); line-height:1; width:34px; height:34px; cursor:pointer; }
@media(max-width:650px){ .plat-preview { width:100%; } }
/* Community projects page */
.projects-intro { display:block; }
.projects-title { font-size:clamp(44px,8vw,96px); line-height:.92; margin:10px 0 18px; }
.projects-title span { color:var(--green-deep,#2f5d3a); }
.projects-grid { margin-top:34px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.project-tag { font-weight:700; }
.project-points { margin:12px 0 0; padding-left:20px; display:grid; gap:8px; font-size:14px; line-height:1.4; }
.project-points a { color:inherit; font-weight:700; }
.projects-intro .life-title .button { width:fit-content; min-width:240px; gap:24px; }