.lens-section{background:#e8ede2}.lens-controls{display:flex;align-items:center;gap:16px;margin-top:20px}.lens-controls span{font-size:.75rem;color:var(--muted)}.lens-controls button{width:44px;height:44px;border:1px solid #7b8979;border-radius:50%;color:var(--green);background:transparent;cursor:pointer}.lens-controls button:hover{background:#d5dece}.lens-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:#7b8979 transparent;padding:4px 0 20px}.lens-card{flex:0 0 280px;min-height:370px;position:relative;overflow:hidden;scroll-snap-align:start;border-radius:8px;color:#fff;background:#172630;text-decoration:none}.lens-card img{width:100%;height:370px;object-fit:cover;transition:transform .3s}.lens-card:hover img{transform:scale(1.035)}.lens-caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:26px;background:linear-gradient(transparent 25%,rgba(10,23,30,.92))}.lens-caption small{color:#f1cc86;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.lens-caption h3{font-size:1.7rem;margin:10px 0 15px}.lens-caption span{font-size:.75rem}
.district-map-section { background: #f7f8f4; }
.places-toolbar { display: flex; align-items: end; gap: 18px; margin: 30px 0 20px; flex-wrap: wrap; }
.place-search-field { flex: 1 1 320px; max-width: 600px; }
.place-search-field label { display: block; color: #344e47; font-size: .8rem; font-weight: 650; margin-bottom: 10px; }
.place-search-field input { width: 100%; min-height: 50px; padding: 13px 16px; border: 1px solid #cdd8d1; border-radius: 12px; background: #fff; color: #203b34; font: inherit; font-size: .9rem; box-shadow: 0 2px 8px #24473804; }
.place-search-field input::placeholder { color: #6c7972; }
.places-toolbar .place-count { margin: 0 0 14px auto; font-size: .8rem; color: #5c6f65; white-space: nowrap; }
.place-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.place-filters[hidden], .district-map-section [hidden] { display: none !important; }
.place-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid #d9e1d9; border-radius: 10px; background: #fff; padding: 8px 13px; font: inherit; font-size: .75rem; color: #41594f; cursor: pointer; transition: background .15s, border-color .15s; }
.place-filters button:hover { background: #eef5ef; border-color: #a4bdaa; }
.place-filters button[aria-pressed=true] { color: #245641; background: #e4f0e5; border-color: #8aae95; box-shadow: inset 0 -2px #8aae95; }
.filter-count { color: #647c6b; font-size: .68rem; font-variant-numeric: tabular-nums; }
.explore-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.place-browser { min-width: 0; }
.map-place-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.map-place { display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 178px; padding: 21px; border: 1px solid #dde4db; border-radius: 14px; background: #fff; color: #243f37; text-decoration: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.map-place:hover { border-color: #a9c0ae; box-shadow: 0 5px 20px #294b340a; }
.map-place[aria-current=true] { background: #f0f7ef; border-color: #8eac92; box-shadow: 0 0 0 1px #8eac92; }
.place-card-text { display: block; min-width: 0; }
.map-place small { display: flex; align-items: center; gap: 7px; color: #5e7766; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.map-place small::before { content: ''; height: 6px; width: 6px; border-radius: 50%; background: #b5c7aa; }
.map-place[data-category=Coast] small::before, .map-place[data-category="Cape landmarks"] small::before { background: #a3c8d6; }
.map-place[data-category=Heritage] small::before, .map-place[data-category="Sacred places"] small::before { background: #d8bc94; }
.map-place strong { display: block; font: normal 1.22rem/1.25 Georgia, serif; overflow-wrap: anywhere; }
.place-summary { display: block; color: #627168; font-size: .76rem; line-height: 1.6; margin-top: 10px; }
.place-card-action { display: flex; align-items: center; gap: 8px; margin-top: auto; color: #527363; font-size: .67rem; }
.place-arrow { margin-left: auto; font-size: .95rem; }
.place-guide-badge { padding: 3px 6px; border-radius: 5px; background: #f0f3ec; color: #65765e; font-size: .59rem; }
#place-more { display: block; min-height: 48px; width: 100%; margin-top: 18px; border: 1px solid #cbd9cc; border-radius: 12px; color: #365e48; background: #edf4eb; font: inherit; font-size: .82rem; cursor: pointer; }
#place-more:hover { background: #e3eddf; }
#place-clear { min-height: 44px; padding: 8px 6px; border: 0; background: transparent; color: #527363; font: inherit; font-size: .77rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
#place-empty { padding: 30px 22px; border: 1px dashed #bfcebf; border-radius: 14px; color: #59705f; font-size: .85rem; background: #fff; }
.map-panel { position: sticky; top: 88px; border: 1px solid #dce4dc; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 25px #27473506; scroll-margin-top: 86px; }
.map-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 23px 22px 18px; background: #edf4ee; color: #304c40; }
.map-heading .eyebrow { color: #6c8370; font-size: .56rem; letter-spacing: .1em; margin-bottom: 9px; }
.map-heading h3 { color: inherit; font: normal 1.5rem/1.2 Georgia, serif; }
.map-heading button { flex-shrink: 0; max-width: 100px; min-height: 44px; border: 1px solid #c7d6c7; border-radius: 9px; color: #476653; background: #ffffffa6; font-size: .67rem; padding: 8px 10px; cursor: pointer; }
.map-heading button:hover { background: #fff; }
.map-selected-detail { padding: 0 22px; }
.map-selected-detail p { padding: 16px 0; color: #637268; font-size: .79rem; line-height: 1.65; }
.map-panel iframe { display: block; width: 100%; height: 300px; border: 0; background: #edf3ed; }
.map-footer { padding: 18px 22px 21px; background: #fff; }
.map-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: .77rem; color: #3c7059; text-underline-offset: 4px; }
.map-story-link:not([hidden]) { display: flex; min-height: 44px; padding: 10px 13px; margin-bottom: 7px; background: #edf4eb; border: 1px solid #d4e2d1; border-radius: 9px; text-decoration: none; line-height: 1.5; }
.map-footer p { color: #6c786f; font-size: .68rem; line-height: 1.65; margin-top: 5px; }
.district-map-section :focus-visible { outline: 2px solid #5d8b70; outline-offset: 4px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .explore-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
  .map-place { padding: 17px; }
  .map-heading { flex-direction: column; gap: 12px; }
  .map-heading button { max-width: none; }
  .place-guide-badge { display: none; }
}
@media (max-width: 760px) {
  .places-toolbar { margin-top: 24px; gap: 10px 16px; }
  .place-search-field { flex-basis: 100%; max-width: none; }
  .places-toolbar .place-count { margin: 2px 0 6px auto; font-size: .73rem; }
  .place-filters { gap: 7px; margin-bottom: 20px; }
  .place-filters button { padding: 8px 10px; font-size: .68rem; gap: 6px; }
  .filter-count { font-size: .6rem; }
  .explore-layout { grid-template-columns: 1fr; gap: 24px; }
  .map-panel { position: static; }
  .map-panel iframe { height: 220px; }
  .map-heading { padding: 18px; }
  .map-heading h3 { font-size: 1.3rem; }
  .map-selected-detail { padding-inline: 18px; }
  .map-selected-detail p { padding-block: 12px; font-size: .75rem; }
  .map-footer { padding: 12px 18px; }
  .map-place-list { gap: 11px; }
  .map-place { min-height: 192px; padding: 15px; gap: 14px; }
  .map-place strong { font-size: 1.1rem; }
  .map-place small { font-size: .52rem; letter-spacing: .03em; margin-bottom: 9px; }
  .place-summary { font-size: .7rem; margin-top: 8px; }
  .place-guide-badge { display: none; }
  .place-card-action { font-size: .64rem; }
  .lens-card { flex-basis: 260px; }
  .lens-card, .lens-card img { height: 350px; min-height: 350px; }
}
@media (max-width: 360px) { .map-place-list { grid-template-columns: 1fr; } .map-place { min-height: 155px; } }
@media (prefers-reduced-motion: reduce) { .map-place, .lens-card img { transition: none; } .lens-card:hover img { transform: none; } }