:root{
  --bg:#F7F6F1; --surface:#FFFFFF; --navy:#123141; --abyss:#0A2230;
  --gold:#C2913C; --gold-soft:#E3C076; --ink:#16242B; --slate:#566873;
  --mist:#E4E7E3; --ok:#2E8B73; --warn:#C9772E; --muted:#8A97A3;
  --lagoon:#2C9D9A; --lagoon-soft:#7FD0CC; --valley:#1E4C3F;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --shadow-soft:0 10px 34px -8px rgba(18,49,65,.16);
  --shadow-card:0 2px 6px rgba(18,49,65,.05), 0 14px 40px -16px rgba(18,49,65,.18);
}

body{ font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
.font-display{ font-family:'Fraunces',serif; letter-spacing:-0.012em; }
.tabular-nums{ font-variant-numeric:tabular-nums; }
h1,h2,h3{ text-wrap:balance; }
::selection{ background:var(--gold-soft); color:var(--abyss); }

/* hairline gold underline */
.gold-rule{ width:52px; height:3px; background:linear-gradient(90deg,var(--gold),var(--lagoon)); border-radius:2px; }
.gold-rule.mx-auto{ margin-left:auto; margin-right:auto; }

/* brand eyebrow */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; }
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.5; }

/* hover lift utility for cards */
.lift{ transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); }
.lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }

/* subtle grain veil for hero overlays */
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Reveal animation base (GSAP toggles via JS; fallback visible) */
.reveal{ opacity:1; }
.gsap-ready .reveal{ opacity:0; transform:translateY(24px); }

/* Leaflet tweaks */
.leaflet-container{ font-family:'Inter',sans-serif; border-radius:var(--r-lg); }
.leaflet-popup-content-wrapper{ border-radius:12px; }
.fn-marker{ background:var(--navy); color:#fff; border:2px solid #fff; border-radius:999px;
  padding:3px 9px; font-weight:600; font-size:12px; box-shadow:0 4px 12px rgba(15,42,67,.3); white-space:nowrap; }
.fn-marker.is-active{ background:var(--gold); color:var(--abyss); transform:scale(1.12); }

/* Favorite active state */
.fav-btn.is-fav{ color:var(--gold) !important; }
.fav-btn.is-fav svg{ fill:var(--gold); }

/* DPE / GES color scale */
.dpe-A{background:#2E8B73}.dpe-B{background:#5BA86B}.dpe-C{background:#9DBE4E}
.dpe-D{background:#E3C987}.dpe-E{background:#E0A23B}.dpe-F{background:#D4763A}.dpe-G{background:#C2442E}

/* Range slider */
input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; background:var(--mist); border-radius:99px; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--navy); cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--navy); cursor:pointer; border:3px solid #fff; }

/* skeleton shimmer */
.skeleton{ background:linear-gradient(90deg,#eef0f2 25%,#e3e7ea 50%,#eef0f2 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .gsap-ready .reveal{ opacity:1 !important; transform:none !important; }
  .skeleton{ animation:none; }
}